@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@font-face {
    font-family: 'Neo Sans';
    src: local('Neo Sans Medium'), local('Neo-Sans-Medium'),
        url('fonts/NeoSans-Medium.woff2') format('woff2'),
        url('fonts/NeoSans-Medium.woff') format('woff'),
        url('fonts/NeoSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
     }

*{
    margin: 0;
    padding: 0;
    list-style:none;
   
    
        
}
.wrap{
    width: 100%;
    max-width: 820px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}


body{
    background: rgb(246,214,214);
    background: linear-gradient(90deg, rgba(246,214,214,1) 0%, rgba(244,217,201,1) 47%, rgba(246,214,214,1) 100%);
    font-family: 'Neo Sans',Helvetica,Arial, "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
    font-weight: bolder;
}

/* 56px */
.toTop-arrow {
width: 3.5rem;
height: 3.5rem;
padding:0;
margin: 0;
border: 0;
border-radius: 33%;
opacity: 0.6;
background: #000;
cursor: pointer;
position:fixed;
right: 1rem;
bottom: 5rem;
display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
width: 31px;
height: 7px;
border-radius: 3px;
background: #f90;
position: absolute;
content: "";
}
.toTop-arrow::before {
transform: rotate(-45deg) translate(0, -50%);
left: 0.4rem;
}
.toTop-arrow::after {
transform: rotate(45deg) translate(0, -50%);
right: 0.4rem;
}
.toTop-arrow:focus {outline: none;}




.header{
    height: 80px;
    background-color: white;
    box-shadow: 5px 2px 5px lightgray;  
}

.logo{
    padding-top: 10px;
    text-align: center;
   

}

.logo img{
    width: 350px;
    height: auto;

}

.footer{
    height: 120px;
    background-color: white;
    box-shadow: 5px 2px 5px lightgray;
    
     }

.brlogo{
    padding-top: 10px;
    text-align: center;
}

.brlogo p{
    font-family: Arial, Helvetica, sans-serif;
    color:grey;
    font-size: 14px;
    text-align: center;
}


.banner-1{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;

}


.banner-2{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;

}



.text{
    text-align: center;
}
.text h1{
    font-size:28px;
    letter-spacing: 3px;
    word-spacing: 5px;
    line-height: 1.6;
    color: #0059a2;
}


.video{
        
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    
}
.video video{
    width:640px;
    height:360px;
    margin: 0 auto;
    border: 20px solid #ddd;
    border-image: url(video/frame-1.png) 20% ;
    box-shadow: 5px 2px 5px lightgray;
}
    
.item-group {
    text-align: center;

}
.item{
    margin: 0 3px 40px;
    

}



.item .pic img{
    width: 100%;
    
  
}

.item .txt h3{
    font-size: 24px;
    text-align: center;
    color: rgb(246,214,214);
}

.shopping{
    text-align: center;
    padding-bottom: 20px;

}
.shopping img{
    width: 250px;
    height: auto;
}

.label{
    text-align: center;
}

.label img{
    width: 500px;
    height: auto;
}



.bottomwrap1{
    width: 100%;
    max-width: 100%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #ea886e;
    text-align: center;
    
    
}

.bottomwrap1 .bottom img{
    width: 800px;
    height: auto;
   
}



.bottomwrap2{
    width: 100%;
    max-width: 1920px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fcdfd8;
    text-align: center;
    
    
}

.bottomwrap2 .bottom img{
    width: 600px;
    height: auto;
   
}




.amos{
    width: 100%;
    height:300px ;

}

.amos1{
    background-color: #215fac;
    display: flex;
    align-items: center;
    justify-content: center;
}


.amos2{
    background-color:#fcdfd8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amos3{
    background-color:#ec8774;
    display: flex;
    align-items: center;
    justify-content: center;
}


.amos4{
    background-color:#215fac;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrap .text5{
    font-size: 28px;
    text-align: center;
    word-break: break-all;
   
  
}
.text4{
    font-size: 28px;
    text-align: center;
    word-break: break-all;
}


.wrap .text7{
    font-size: 26px;
    text-align: center;
    word-break: break-all;
    
}

@media screen and (max-width:768px){
#container{
    width: 720px;
 }



 .footer img{
    width: 90%;
 }

.banner-1 img{
    width: 100%;
    height: auto;
}

.banner-2 img{
    width: 100%;
    height: auto;
}

.text h1{
    font-size:28px;
    letter-spacing: 3px;
    word-spacing: 5px;
    line-height: 1.6;

}



.video{
        
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    
}
.video video{
    width:320px;
    height:180px;
    margin: 0 auto;
    border: 10px solid #ddd;
    border-image: url(/images/frame-1.png) 20% ;
    box-shadow: 5px 2px 5px lightgray;
}

.shopping img{
    width: 200px;
    height: auto;
}

.label img{
    width: 100%;
    height: auto;
}

.bottomwrap1 .bottom img{
    width: 100%;
    height: auto;
   
}

.bottomwrap2 .bottom img{
    width: 100%;
    height: auto;
   
}

.item .pic img{
    width: 90%;
    height: auto;
}


.wrap .text5{
    font-size: 20px;
    text-align: center;
   
  
}

.text4{
    font-size: 20px;
    text-align: center;
}

.wrap .text7{
    font-size: 20px;
    
    
}

}



@media screen and (min-width:768px){


.item-group{
    display: flex;
}


.amos{
    width: 50%;
    float: left;
}





}