/* CSS Document */


/** -----------------------------
 ** CatchCopy
 ** ---------------------------*/
#copy{
    margin-top:40px;
    margin-bottom:40px;
    font-size: 26px;
    line-height: 180%;
}

@media screen and (max-width:575px){
    #copy{
        font-size: 18px;
        padding-left:15px;
        padding-right:15px;
    }
}

/** -----------------------------
 ** Servicemap
 ** ---------------------------*/
#servicemap{
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 40px;
}

/** -----------------------------
 ** Product Banner
 ** ---------------------------*/

#product{
    margin-top:    60px;
    margin-bottom: 60px;
}
#product h4{
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px
}
.bannerWrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.bannerWrap div{
    width: 50%;
    padding: 25px;
	margin:auto;
}

@media screen and (max-width:575px){
    #product{
        margin-top:    20px;
        margin-bottom: 20px;
    }
    .bannerWrap div{
        width: 100%;
        padding: 15px;
    }
}

/** -----------------------------
 ** Service
 ** ---------------------------*/

#serviceItems{
    margin-top:60px;
    margin-bottom:60px;
}

#services .head{
    width: 300px;
    height: 180px;
    border-right: 2px solid #ccc;
    margin-right: 30px;
}
#services .head h4{
    text-align: center;
    line-height: 180px;
}

#services .d-flex{
    margin-bottom: 40px;
}
#services .contents{
    flex:1;
}
#services .photo{
    text-align: center;
}
#services .text{
    font-size: 16px;
    text-align: center;
    line-height: 180%;
}
@media screen and (max-width:575px){
    
    #serviceItems{
        margin-top:   30px;
        margin-bottom:30px;
        display: block;
    }

    #services .head{
        width: 100%;
        height: 180px;
        border-right: none;
        margin-right: 30px;
    }
    #services .head h4{
        line-height: 100%;
    }
    #services .contents{
        width: 100%;
        flex:auto;
    }
    
}