@charset "utf-8";

/* 16px = 1rem 기준 */

/* section01 */
    #bi-main{
        width: 100%;
        padding-top: 100px;
        background-color: #F5F5FD;
    }
    .bi-inner{
        display: flex;
        justify-content: flex-start;
    }

    #bi-main .txt-box{
        width: 50%;
        margin: auto;
    }
    .txt-box h3{
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .txt-box p{
        font-size: 1.4rem;
    }

    #bi-main .img-box{
        width: 50%;
        display: flex;
        justify-content: flex-end;
    }

    .img-box>img{
        width: 90%;
        mix-blend-mode: darken;
    }
    .bi-main .txt-box>p:nth-child(3){
        width: 8.125rem;
        padding: 10px 25px;
        margin-top: 50px;
        font-size: 1.25rem;
        color: #fff;
        background-color: #3b9d52;
        border-radius: 5px;
        cursor: pointer;
    }


/* section02 */
.section02{
    padding: 100px 0;
}
.section02 .textWrap h2 {
    font-size: 2.25rem;
    margin-bottom: 2.06rem;
}

.section02 .textWrap p {
    font-size: 1.25rem;
    font-weight: 600;
}

/* section03 */
.section03 {
    background-color: #FFF;
    padding: 0 0 12.5rem; 
}

.section03 .container {
    /* max-width: 1250px; */
    max-width: 78.125rem; 
    margin: 0 auto;
}

.section03 .container .addWrap .addInner {
    display: none;
    margin: 0 auto 3.4375rem; 
    /* margin: 0 auto 55px; */
    color: #1a1a1a;
}

.section03 .container .addWrap .addInner h2 {
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

.section03 .container .addWrap .addInner p {
    font-size: 1.25rem;
}

/* active */
.section03 .container .addWrap .addInner.active {
    display: block;
}

.section03 ul.tab-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section03 ul.tab-inner li {
    cursor: pointer;
    width: 25%;
    display: inline-block;
    padding: 0.625rem 0.9375rem; 
    color: #1a1a1a;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
}

/* active */
.section03 .tab-inner li.active {
    color: #3b9d52;
}

.section03 ul.tab-inner li .tabImg {
    display: none;
}

.section03 ul.tab-inner li .tabImg.active {
    display: inline-block;
    height: auto;
    max-width: 1.5rem;
    margin-right: 0.625rem;
}
.section03 ul.tab-inner li .tabImg img {
    width: 100%;
    vertical-align: middle;
}

.section03 .tab-content {
    display: none;
    padding: 0.9375rem 0; 
}

/* active */
.section03 .tab-content.active  {
    display: inherit;
}

.section03 .tab-content iframe {
    width: 100%;
    height: 31.25rem;
    border-radius: 20px;
    border: 0px;
    margin-top: 0.625rem;
}

.section03 .tab-content .map-placeholder {
    width: 100%;
    height: 31.25rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.625rem;
    border: 2px dashed #ccc;
}

.section03 .tab-content .map-placeholder .map-info {
    text-align: center;
    padding: 2rem;
}

.section03 .tab-content .map-placeholder .map-info h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #3b9d52;
    margin-bottom: 1rem;
}

.section03 .tab-content .map-placeholder .map-info p {
    font-size: 1rem;
    color: #666;
    margin: 0.5rem 0;
}

.section03 .storesWrap {
    padding-top: 3.4375rem; 
    max-width: 78.125rem; 
    margin: 0 auto;
}

.section03 .storesWrap ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.section03 .storesWrap ul li {
    width: calc(100%/2 - 10px);
    border: 1px solid #D8D8D8;
    border-radius: 20px;
    padding: 2.5rem 3.125rem;
}

.section03 .storesWrap ul li h3 {
    color: #3b9d52;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.9375rem;
}

.section03 .storesWrap ul li p {
    color: #757575;
    font-size: 1rem;
    line-height: 1.8;
}

/* solutionBtn */
.solutionBtn {
    margin-top: 1rem;
    cursor: pointer;
    display: inline-block;
    padding: 0.625rem 1.5625rem;
    color: #FFF;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 4px;
    background-color: #3b9d52;
    border: 1px solid #3b9d52;
}

.solutionBtn:active,
.solutionBtn:hover {
    transition: .2s ease-out;
    color: #3b9d52;
    background: none;
}

/* ~ LapTop 1440px */
@media screen and (max-width:1440px) {
    #bi-main{
        width: 100%;
        padding-top: 100px;
        background-color: #F5F5FD;
    }
    .bi-inner{
        display: flex;
        justify-content: flex-start;
    }

    #bi-main .txt-box{
        width: 50%;
        margin: auto;
    }
    .txt-box h3{
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .txt-box p{
        font-size: 1.4rem;
    }

    #bi-main .img-box{
        width: 50%;
        display: flex;
        justify-content: flex-end;
    }

    .img-box>img{
        width: 90%;
        mix-blend-mode: darken;
    }
    .bi-main .txt-box>p:nth-child(3){
        width: 8.125rem;
        padding: 10px 25px;
        margin-top: 50px;
        font-size: 1.25rem;
        color: #fff;
        background-color: #3b9d52;
        border-radius: 5px;
        cursor: pointer;
    }

    .section03 {
        padding: 0 1.25rem 12.5rem;
    }
}


/* ~ Tablet */ 
@media screen and (max-width: 768px) {
    #bi-main{
        width: 100%;
        height: 70vh;
        padding-top: 100px;
        background-color: #F5F5FD;
    }
    .bi-inner{
        display: flex;
        flex-direction: column;
    }

    #bi-main .txt-box{
        width: 100%;
    }
    .txt-box h3{
        font-size: 1.75rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .txt-box p{
        font-size: 1rem;
    }

    #bi-main .img-box{
        width: 100%;
    }

    .img-box>img{
        width: 100%;
        mix-blend-mode: darken;
    }
    .bi-main .txt-box>p:nth-child(3){
        box-sizing: content-box;
        width: 4rem;
        padding: 10px 25px;
        margin: 50px 0;
        font-size: 1rem;
        color: #fff;
        background-color: #3b9d52;
        border-radius: 5px;
    }


    .section02 {
        padding: 100px 0;
    }

    .section03 ul.tab-inner {
        flex-wrap: wrap;
    }

    .section03 ul.tab-inner li{
        width: 50%;
    }

    .section03 .storesWrap ul li {
        width: 100%;
    }
}

/* ~ Mobile L */
@media screen and (max-width:425px) {
    #bi-main{
        width: 100%;
        height: 70vh;
        padding-top: 100px;
        background-color: #F5F5FD;
    }
    .bi-inner{
        display: flex;
        flex-direction: column;
    }

    #bi-main .txt-box{
        width: 100%;
    }
    .txt-box h3{
        font-size: 1.75rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .txt-box p{
        font-size: 1rem;
    }

    #bi-main .img-box{
        width: 100%;
    }

    .img-box>img{
        width: 100%;
        mix-blend-mode: darken;
    }
    .bi-main .txt-box>p:nth-child(3){
        box-sizing: content-box;
        width: 4rem;
        padding: 10px 25px;
        margin: 50px 0;
        font-size: 1rem;
        color: #fff;
        background-color: #3b9d52;
        border-radius: 5px;
    }

    /* font-size */
    .solutionBtn {
        font-size: 0.75rem;
    }

    .section01 .flexWrap .flexLef .fleTxt h2  {
        font-size: 2rem;
    }

    .section01 .flexWrap .flexLef .fleTxt p {
        font-size: 0.875rem;
    }

    .section02 .textWrap h2 {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .section02 .textWrap p {
        font-size: 0.875rem;
    }

    .section03 .tab-content iframe {
        height: 350px;
    }

    .section03 .container .addWrap .addInner h2 {
        font-size: 1.25rem;
    }

    .section03 .container .addWrap .addInner p,
    .section03 ul.tab-inner li {
        font-size: 0.875rem;
    }

    .section03 ul.tab-inner li {
        padding: 0.625rem 0;
        letter-spacing: -1px;
    }

    .section03 ul.tab-inner li .tabImg.active {
        max-width: 1rem;
        margin-right: 0.5rem;
    }

}