
body
{
    
    font-size: 16px;
    
}
.body-content
{
    
    background: url("image/m.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0 auto;
    min-height: 100vh;
}

.content-pad
{
    padding-left: 30px;
    padding-right: 30px;
}

.header-space
{
    padding-top:100px;
}

.logo-margin-btm
{
    margin-bottom:50px;
}
.btm-margin
{
    margin-bottom: 50px;
}

/*temp1*/
.content
{
    width:100%;
    display: flex;
    flex-flow:row wrap;
    justify-content:center;
    align-content:center;
    align-items:center;
}
.item1
{
    order:1;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 100%;
    flex-basis: auto;
    align-self:auto;  
    padding-left: 20px;
    padding-right: 20px;
}
.item2
{
    order:2;
    flex-grow: 0;
    flex-shrink: 0; 
    max-width: 100%;
    flex-basis: auto;
    align-self:auto;
    padding-left: 20px;
    padding-right: 20px;
}

/*temp2*/
.content-col
{
    width:100%;
    display: flex;
    flex-flow:column;
    justify-content:center;
    align-content:center;
    align-items:center;
}
.item0-col
{
    order:1;
    flex:0 0 auto;
    align-self:auto;  
}
.item1-col
{
    order:2;
    flex:0 0 auto;
    max-width: 535px;
    align-self:auto;  
}

.item2-col
{
    order:3;
    max-width: 100%;
    flex:1 0 auto;
}
.item3-col
{
    order:4;
    max-width: 100%;
    flex:1 0 auto;
    padding-left: 50px;
    padding-right: 50px;
}

/*temp3*/
.content-row
{
    width:100%;
    display: flex;
    flex-flow:row wrap;
    justify-content:center;
    align-content:center;
    align-items:center;
}
.c1
{
    order:1;
    flex:0 0 auto;
    align-self:auto;  
    flex-basis: 200px;
}
.c2
{
    order:2;
    flex:0 0 auto;
    align-self:auto;  
    flex-basis: 200px;
}

.c3
{
    order:3;
    flex:0 0 auto;
    align-self:auto;  
    flex-basis: 200px;
}
.c4
{
    order:4;
    flex:0 0 auto;
    align-self:auto;  
    flex-basis: 200px;
}
.c5
{
    order:5;
    flex:0 0 auto;
    align-self:auto;  
    flex-basis: 200px;
}

/*temp4*/
.content-col-ios
{
    width:100%;
    display: flex;
    flex-flow:column;
    justify-content:center;
    align-content:center;
    align-items:center;
}
.item-ios1
{
    order:1;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    align-self:auto;  
}
.item-ios2
{
    order:2;
    flex-grow: 0;
    flex-shrink: 0; 
    flex-basis: auto;
    align-self: auto;
}
.item-ios3
{
    order:3;
    flex-grow: 0;
    flex-shrink: 0; 
    flex-basis: auto;
    align-self:auto;
}

.title
{
    margin-top:10px;
    margin-bottom:10px;
}
 @media (min-width: 481px) 
{
    .body-content
    {
        
        background: url("image/bg-a.png");
        background-size: 100% 100%;
    }

    .content-row
    {
        gap:50px;
    }
} 
