
h4 { 
    font-size: 1.8rem;
    font-weight: normal;
    letter-spacing: 0;
}
.rb-rayble-is {

}
.rb-rayble-is h4 {
    text-align: center;
    margin-bottom: 2rem;
}
.rb-rayble-is .rb-rayble-is-content {
    padding: 0 8rem;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: auto 20%;
    row-gap: 3rem;
    column-gap: 2rem;
    align-items: center; 
}
.rb-rayble-is .rb-rayble-is-content div:nth-child(2n) img {
    width: 100%;
}
.rb-rayble-is .rb-rayble-is-content h5 {
    margin-bottom: 1.3rem;
    font-size: 1.3rem;
    font-weight: normal;
}
.rb-rayble-is .rb-rayble-is-content p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.3;
}
.rb-video {
    height: 540px;
    text-align: center;
    position: relative;
    margin-top: 8rem;
}
.rb-video .rb-video-text {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rb-video .rb-video-text h4 {
    letter-spacing: 0;
    color: #FFF;
    margin-bottom: 20px;
    font-size: 1.35rem;
}
.rb-service {
    padding: 0 8rem;
    margin-top: 8rem;
}
.rb-service h4 {
    text-align: center;
    margin-bottom: 2rem;
}
.rb-service .rb-service-content {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10등분 */
    grid-template-rows: auto auto auto; 
    row-gap: 4rem;
    column-gap: 1rem;
    align-items: center;
}

/* 1행: 5:5 */
.i1{ grid-column: 1 / span 5; grid-row:1; padding-left: 30%; }
.i5{ grid-column: 6 / span 5; grid-row:1; padding-left: 30%; }

/* 2행: 3:4:3 */
.i2{ grid-column: 1 / span 3; grid-row:2; padding-left: 15%; }
.i4{ grid-column: 4 / span 4; grid-row:2; }
.i4 img {
    width: 100%;
}
.i6{ grid-column: 8 / span 3; grid-row:2; padding-left: 15%; }

/* 3행: 5:5 */
.i3{ grid-column: 1 / span 5; grid-row:3; padding-left: 30%; }
.i7{ grid-column: 6 / span 5; grid-row:3; padding-left: 30%; }

.rb-service .rb-service-content div h5 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: normal;
    letter-spacing: 0;
}
.rb-service .rb-service-content div p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.3;
}
.rb-bulb {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 8rem;
}
.rb-bulb div {
    flex: 1;
}
.rb-bulb div:first-child img {
    width: 100%;
    vertical-align: top;
}
.rb-bulb p {
    color: #FFF;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
}
.rb-bulb p:first-child {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.rb-bulb div:last-child {
    padding: 2rem;
}
.rb-history {
    padding: 0 8rem;
    margin-top: 8rem;
    text-align: center;
}
.rb-history h4 {
    margin-bottom: 2rem;
}
.rb-history .history {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
}
.rb-history .history > div {
    flex: 1;
    text-align: center;
}
.rb-history .history > div.timeline {
    flex: 1;
}

.rb-history .history div p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: 1rem;
    color: #666;
}
.rb-history .history div a {
    display: block;
    margin-top: 2rem;
    font-size: 1rem;
    color: #64bcff;
    letter-spacing: 0;
}
.rb-history .history div a:hover {
    /* color: #000; */
}
.rb-customer-center {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    background-color: #f3f5f6;
    gap: 2rem;
    margin-top: 8rem;
}
.rb-customer-center > div {
    flex: 1;
}
.rb-customer-center > div:first-child {
    align-self: flex-start;
}
.rb-customer-center > div:first-child img {
    width: 100%;
    vertical-align: top;
}
.rb-customer-center > div:last-child {
    padding: 2rem;
}
.rb-customer-center h4 {
    margin-bottom: 1rem;
    font-size: 2.6rem;
}
.rb-customer-center p {
    letter-spacing: 0;
}
.rb-customer-center .tel {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.rb-customer-center .time {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.rb-customer-center .desc1 {
    font-size: 1rem;
    margin-bottom: 2rem;
}
.rb-customer-center .desc2 {
    font-size: 0.9rem;
    line-height: 1.2;
    color: #666;
}
.rb-location {
    text-align: center;
    margin-top: 8rem;
}
.rb-location .map-area {
    width: 100%;
    height: 300px;
    background-color: #f0f0f0;
    margin: 3rem 0 2rem 0;
}
.rb-location p {
    display: inline-block;
    font-size: 1rem;
    color: #666;
}
.rb-location p:first-child {
    font-size: 1.8rem;
    color: #333;
}

@media (max-width: 1000px) {
.rb-video {
    width: 100%;
    height: 100%;
    aspect-ratio: 21 / 9;
}
.rb-rayble-is .rb-rayble-is-content {
    padding: 0 4rem;
    grid-template-columns: 1fr;
}
.rb-rayble-is .rb-rayble-is-content div:nth-child(2n) { 
    display: none;
}
.rb-video {
    margin-top: 6rem;
}
.rb-service {
    padding: 0 4rem;
    margin-top: 6rem;
}
.rb-service .rb-service-content {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: initial;
    grid-template-rows: auto;
    row-gap: 2rem;
    grid-template-areas:
    "i1 i5"
    "i2 i6"
    "i3 i7";
}
.rb-service .rb-service-content div { 
    margin-bottom: 1.5rem;
}
.rb-service .rb-service-content div h5 { 
    margin-bottom: 0.8rem;
}
/* .rb-service .rb-service-content > div{
    grid-column: auto !important;
    grid-row: auto !important;
} */
.rb-service .rb-service-content div:nth-child(1) { grid-area: i1; padding-left: 0; }
.rb-service .rb-service-content div:nth-child(2) { grid-area: i2; padding-left: 0; }
.rb-service .rb-service-content div:nth-child(3) { grid-area: i3; padding-left: 0; }
.rb-service .rb-service-content div:nth-child(4) { grid-area: i4; padding-left: 0; }
.rb-service .rb-service-content div:nth-child(5) { grid-area: i5; padding-left: 0; }
.rb-service .rb-service-content div:nth-child(6) { grid-area: i6; padding-left: 0; }
.rb-service .rb-service-content div:nth-child(7) { grid-area: i7; padding-left: 0; }
.rb-service .rb-service-content div:nth-child(4) { 
    display: none;
}
.rb-bulb {
    margin-top: 6rem;
    display: block;
}
.rb-bulb div {
    text-align: center;
}
.rb-bulb div:first-child img {
    max-width: 500px;
}
.rb-history {
    padding: 0 4rem;
    margin-top: 6rem;
}
.rb-history .history {
    display: block;
}
.rb-history .history > div {
    margin-bottom: 2rem;
}
.rb-history .history > div.timeline img {
    max-width: 400px;
}
.rb-customer-center {
    margin-top: 6rem;
    display: block;
    text-align: center;
}
.rb-customer-center div:first-child img {
    max-width: 500px;
}
.rb-location {
    margin-top: 6rem;
}
.rb-location p:first-child {
    margin-bottom: 1rem;
}
}
@media (max-width: 768px) {
.rb-service .rb-service-content {
    display: block;
}
.rb-service .rb-service-content div { 
    margin-bottom: 1.5rem;
}
.rb-service .rb-service-content div h5 { 
    margin-bottom: 0.8rem;
}
}