@charset "UTF-8";

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    letter-spacing: 1px;
    font-family: Arial, "微軟正黑體";
}

.img-resp {
    width: 100%;
    display: block;
}

.feature__item {
    display: flex;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 80px;
}

.feature__item:nth-child(odd) .feature__head{
    order: 2;
    margin-left: -10%;
}

.feature__item:nth-child(odd) .feature__body{
    order: 1;
}

.feature__item:nth-child(even) .feature__head{
    order: 1;
    margin-right: -10%;
}

.feature__item:nth-child(even) .feature__body{
    order: 2;
}

.feature__head {
    position: relative;
    z-index: 1;
    padding: 2em 3em;
    width: 50%;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,.1);
}

.feature__body {
    width: 60%;
}

.feature__head h2,
.feature__head h3 {
    font-weight: 100;
}

.feature__head h2 {
    font-size: 30px;
}

.feature__head h3 {
    font-size: 20px;
    color: #999;
}

.feature__head p {
    line-height: 1.7;
    color: #333;
    font-size: 18px;
}

/*
    紅色: #d32f2f
    藍色: #0288d1
    綠色: #689f38
    深藍: #303f9f
    紫色: #7b1fa2
*/

.title1 {
    color: #d32f2f;
}
.title2 {
    color: #0288d1;
}
.title3 {
    color: #689f38;
}
.title4 {
    color: #303f9f;
}
.title5 {
    color: #7b1fa2;
}