/* main */
.main{
    position: relative;
}


.main .main-banner{
    background: url(/base/img/mf/img_main.png) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding: 10rem 0;
    position: relative;
}


.main .main-banner .main-title{
    color: #fff;
    text-align: left;
    padding: 30rem 0;
}


.main .main-banner .main-title h2{
    font-size: 7rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 2rem;
}


.main .main-banner .main-title p{
    font-size: 2.4rem;
    font-weight: 400;
}


.main .main-banner .main-title .more-btn a{
    font-family: "Noto Sans KR";
    font-size: 2rem;
    background: #334B9B;
    display: inline-block;
    padding: 2rem 5rem;
    border-radius: 5rem;
    line-height: 1;
    margin-top: 4rem;
}


.main-intro{
    padding: 14rem 0;
    overflow: hidden;
    position: relative;
}


.section-title h2{
    font-size: 5.4rem;
    font-weight: 500;
    line-height: 1;
}


.section-title p{
    font-size: 2.4rem;
    margin: 3rem 0 8rem;
    font-weight: 400;
}


.section-title.more-arrow{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-title.more-arrow .more-arrow-wrap{
    font-size: 1.6rem;
    color: #4D4D4D;
}
.section-title.more-arrow .more-arrow-wrap a{
    padding-right: 3rem;
}
.section-title.more-arrow .more-arrow-wrap a::after{
    content: '';
    background: url(/base/img/mf/ico_arrows.png) no-repeat;
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    margin-left: 5px;
}
.main-tech{
    padding: 14rem 0;
}


.main-tech .tech-wrap .tech-item{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    gap: 3rem;
}


.main-tech .tech-wrap .tech-item .tech-list{
    background-color: #FAFAFA;
    padding: 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.main-tech .tech-wrap .tech-item .tech-list .list-txt{
    margin-top: 4rem;
}


.main-tech .tech-wrap .tech-item .tech-list .list-txt p{
    font-size: 1.8rem;
}


.main-tech .tech-wrap .tech-item .tech-list .list-txt h3{
    font-size: 2.4rem;
    font-weight: bold;
    color: #334B9B;
}


.main-contribution{
    padding: 14rem 0 0 0;
}
.main-contribution .section-title{
    text-align: center;
}
.main-contribution .innovation-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border: 1px solid #ddd;
}
.main-contribution .innovation-wrap .innovation-item{
    border-right: 1px solid #ddd;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem;
    position: relative;
}
.main-contribution .innovation-wrap .innovation-item .ml-4{
    margin-left: 4rem;
}
.main-contribution .innovation-wrap .innovation-item p{
    text-align: center;
    font-size: 2.4rem;
    margin-top: 1.4rem;
}
.main-contribution .innovation-wrap .innovation-item:last-child{
    border-right: 0;
}


.main-contribution .contribution{
    background: url(/base/img/mf/contribution-img.png) no-repeat;
    padding: 12rem 0 ;
}
.main-contribution .contribution-wrap{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;


}
.main-contribution .contribution-wrap .contribution-item{
    background: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 2rem;
    overflow: hidden;
}
.main-contribution .contribution-wrap .contribution-item .contribution-txt{
    padding: 3rem 3rem 6rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
}
.main-contribution .contribution-wrap .contribution-item .contribution-txt h3{
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 3rem;
}
.main-contribution .contribution-wrap .contribution-item .contribution-txt p{
    font-size: 1.6rem;
    color: #666;
}
.main-contribution .contribution-wrap .contribution-item .contribution-img img{
    height: 100%;
    object-fit: cover;
}
.main-contribution .contribution-wrap .mo-contri{
    display: none;
}


.main-contribution .contribution-wrap .pc-contri{
    display: block;
}


/* product */


.sub-title{
    margin-bottom: 8rem;
}
.sub-title h2{
    font-size: 7rem;
    line-height: 1;
}
.sub-title p{
    font-size: 2.4rem;
    margin-top: 3rem;
}
.sub{
    padding: 18rem 0 14rem;
}
.sub-title{
    text-align: center;
}
.sub-title h2{
    font-size: 3.8rem;
}
.sub-title p{
    font-size: 1.8rem;
    font-weight: 400;
}
.sub-product .product-tab{
    border-bottom: 1px solid #ddd;
}
.sub-product .product-tab .list-tab{
    display: flex;
    align-items: center;
    justify-content: center;
}
.sub-product .product-tab .list-tab .tab a{
    color: #666;
    padding: 1.5rem 3.5rem;
    display: block;


}
.sub-product .product-tab .list-tab .tab.active a{
    font-weight: bold;
    color: #000;
    border-bottom: 2px solid #000;
}
.sub-product .product-wrap{
    padding-top: 5rem;
}
.sub-product .product-wrap .list-table{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    margin: 0 6rem;
    text-align: center;
}


.sub-product .product-wrap .list-table p{
    font-size: 1.8rem;
}


.sub-product .product-wrap .list-table h3{
    font-size: 2.4rem;
    color: #334B9B;
    font-weight: bold;
    margin-bottom: 2rem;
}


.sub-product .product-wrap .btn a{
    background: #EFF0F2;
    padding: 1.2rem 2.4rem;
    display: inline-block;
    font-size: 1.4rem;
    margin: 0 0.2rem;
    border-radius: 5px;
}


.sub-product .product-wrap .btn .link-btn{
    background-color: #475c73;
    color: #fff;
}


.sub-product .product-wrap .detail-image{
    text-align: center;


}
.sub-product .product-wrap .detail-image + .btn{
    margin: 0 auto;
    width: 100%;
    text-align: center;
    margin-top: 3rem;
}
.sub-product .product-wrap .detail-image + .btn a{
    width: 30%;
}
.map .root_daum_roughmap{
    width: 80%;
    margin: 0 auto;
}
.map .section_address {
    display: none;
}


/* story */


.sub-story.sub{
    padding: 12rem 0;
}


.sub-story .sub-title{
    background: url(/base/img/mf/esg_img.png) no-repeat;
    background-size: cover;
    padding: 20rem 2rem;
    color: #fff;
}


.sub-story .sub-title h2{
    font-weight: bold;
}
.sub-story .esg-wrap{
    text-align: center;
    padding-top: 2rem;
}
.sub-story .esg-title h3{
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 2rem;
}
.sub-story .esg-title p{
    font-size: 2rem;
}
.sub-story .esg-content{
    margin-top: 7rem;
}
.sub-story .esg-content ul{
    display: grid;
    grid-template-columns: 2fr 2fr;
    width: 70%;
    margin: 0 auto;
    gap: 4rem 2rem;
}


.sub-story .esg-content .esg-list h3{
    font-size: 2rem;
    font-weight: bold;
    margin: 1rem 0 0 0;
}


.sub-story .esg-content .esg-list p{
    font-size: 1.6rem;
    font-weight: 400;
}


.sub-overview{
    padding: 12rem 0;
    text-align: center;
}


.sub-overview .esg-title h3{
    font-size: 3.5rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 5rem;
}
.sub-overview .overview-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4rem 1rem;
}
.sub-overview .overview-wrap .overview-list figure{
    background: url(/base/img/mf/m11_sec2_icon1.png) no-repeat;
    background-position: center;
    width: 20rem;
    height: 20rem;
    background-color: #F3F3F4;
    margin: 0 auto;
    border-radius: 15rem;
}
.sub-overview .overview-wrap .overview-list:nth-child(2) figure{
    background-image: url(/base/img/mf/m11_sec2_icon2.png);
}
.sub-overview .overview-wrap .overview-list:nth-child(3) figure{
    background-image: url(/base/img/mf/m11_sec2_icon3.png);
}
.sub-overview .overview-wrap .overview-list:nth-child(4) figure{
    background-image: url(/base/img/mf/m11_sec2_icon4.png);
}
.sub-overview .overview-wrap .overview-list:nth-child(5) figure{
    background-image: url(/base/img/mf/m11_sec2_icon5.png);
}
.sub-overview .overview-wrap .overview-list:nth-child(6) figure{
    background-image: url(/base/img/mf/m11_sec2_icon6.png);
}
.sub-overview .overview-wrap .overview-list:nth-child(7) figure{
    background-image: url(/base/img/mf/m11_sec2_icon7.png);
}
.sub-overview .overview-wrap .overview-list:nth-child(8) figure{
    background-image: url(/base/img/mf/m11_sec2_icon8.png);
}
.sub-overview .overview-wrap p{
    margin: 2rem 0 0.5rem 0;
    color: #666;
}


.sub-overview .overview-wrap h3{
    font-size: 2rem;
    font-weight: bold;
}