@charset "UTF-8";

/* 회사소개
****************************************************************/

/* 공통 */
br.mo {
    display: none;
}


/* 효성웨이 new */
#sub_visual_title.way-new{
    margin-bottom: 0;
}
#sub_visual_title.way-new::before{
    background-image: url(../images/company/visual_banner_hyosung_way.jpg);
    opacity: 0.7;
}
#sub_visual_title.way-new::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 160px;
    left: 0px;
    bottom: 0;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, #020A0A 100%);
    z-index: 20;
}
.way_cont{
    background: #020a0a;
    position: relative;
    overflow: hidden;
}
.way_intro::before{
    background-image: url(../images/company/our_value.png);
    content: '';
    display: block;
    background-size: cover;
    height: 100vh;
}
.way_intro{
    position: relative;
}

.way_intro::after{
    background-image: url(../images/company/round-bg.png);
    content: '';
    display: block;
    background-size: contain;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 100%;
    height: 100%;
    transition: all 2s;
    background-position: center;
}

.way_intro.active::after {
    transform: translate(-50%, -50%) scale(8);
}

.way_intro .way_intro_title{
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
    font-family: 'Noto Sans KR';
    z-index: 10;
}
.way_intro .way_intro_title h1{
    color: #fff;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 40px */
    letter-spacing: -0.25px;
    margin-bottom: 40px;
    opacity: 0;
}
.way_intro .way_intro_title .intro_tit{
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 2.4rem;
    letter-spacing: -0.25px;
    margin-bottom: 20px;
    opacity: 0;
}
.way_intro .way_intro_title .intro_summary{
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.8rem;
    letter-spacing: -0.25px;
    opacity: 0;
}

/* 수정 */
.way_intro.active .way_intro_title h1{
    animation: visual_title_view 0.5s forwards 0.1s;
}
.way_intro.active .way_intro_title .intro_tit{
    animation: visual_title_view 0.5s forwards 0.25s;
}
.way_intro.active .way_intro_title .intro_summary{
    animation: visual_title_view 0.5s forwards 0.4s;
}
.way-mission{
    margin: 0 auto;
    padding-top: 150px;
    padding-bottom: 180px;
    font-family: 'Noto Sans KR';
}
.way-mission .photo{
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
}
.way-mission .photo img{
    border-radius: 20px;
}
.way-mission .photo .mo{
    display: none;
}
.way-mission .photo .photo-txt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    width: 790px;
}
.way-mission .photo .photo-txt h1{
    color: #fff;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 40px */
    letter-spacing: -0.25px;
    margin-bottom: 40px;
    opacity: 0;
}
.way-mission .photo .photo-txt .mission_tit{
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 2.4rem;
    letter-spacing: -0.25px;
    margin-bottom: 20px;
    opacity: 0;
}
.way-mission .photo .photo-txt .mission_summary{
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.8rem;
    letter-spacing: -0.25px;
    opacity: 0;
}
/* 수정 */
.way-mission.active .photo .photo-txt h1{
    animation: visual_title_view 0.5s forwards 0.2s;
}
.way-mission.active .photo .photo-txt .mission_tit{
    animation: visual_title_view 0.5s forwards 0.3s;
}
.way-mission.active .photo .photo-txt .mission_summary{
    animation: visual_title_view 0.5s forwards 0.4s;
}

.new-way #sub_contents{
    padding: 150px 0px 180px;
}
.new-way #sub_contents.way-mission h2{
    margin: 150px 0 40px;
}
.hw_narrative_keyword{
    grid-template-rows: unset !important;
    margin-bottom: 0; 
}
.hw_narrative_keyword h3{
    color: #1465F4;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.25px;
    line-height: 26px;
}
.hw_narrative_keyword h3 .strong{
    color: #222;
    text-align: center;
    font-family: 'Noto Sans KR';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.25px;
}
.hw_narrative_keyword ul{
    text-align: left;
    color: #666;
}
.hw_narrative_keyword ul li{
    position: relative;
    padding-left: 12px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8rem;
}
.hw_narrative_keyword ul li:last-child{
    margin-top: 14px;
}
.hw_narrative_keyword ul li{
    position: relative;
    padding-left: 11px;
}
.hw_narrative_keyword ul li::before{
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background-color: #666;
    position: absolute;
    top: 14px;
    left: 0;
    border-radius: 100%;
}

.hw_narrative_keyword section h3{
    font-size: 16px;
}

.hw_narrative_keyword section h3 strong{
    font-size: 20px;
}

/* PC Normal Size
***************************************************************************/
@media all and (max-width: 1670px) {
    #sub_contents.history .h_container .h_content img.img_hty.img_hty03{
        right: -20rem;
    }
    #sub_contents.history .h_container .h_content img.img_hty.img_hty13 {
        left: -10rem;
    }
    #sub_contents.history .h_container .h_content img.img_hty.img_hty14 {
        width: 30%;
        right: -10rem;
    }

    .way_intro::after{
        background-image: url(../images/company/round-bg-mo.png);
        background-position: 0;
    }

    .hw_narrative_keyword ul li{
        padding-left: 12px;
        font-size: 15px;
        line-height: 20px;
    }
    .hw_narrative_keyword ul li:last-child{
        margin-top: 12px;
    }

    .hw_narrative_keyword ul li::before{
        content: '';
        display: block;
        width: 3px;
        height: 3px;
        background-color: #666;
        position: absolute;
        top: 8px;
        left: 0;
        border-radius: 100%;
    }

    .hw_narrative_keyword section h3 strong{
        margin-bottom: 0;
    }
}


/* Mobile Size
***************************************************************************/
@media all and (max-width: 1279px) {
    /* 공통 */
    br.mo {
        display: unset;
    }
    br.pc {
        display: none;
    }


    /* Hyusong way new */
    .way_intro .way_intro_title h1{
        font-size: 26px;
        line-height: 26px;
        margin-bottom: 30px;
    }
    .way_intro .way_intro_title .intro_tit{
        font-size: 18px;
        line-height: 1.8rem;
        margin-bottom: 14px;
    }
    .way_intro .way_intro_title .intro_summary{
        font-size: 15px;
        line-height: 1.58rem;
    }

    .way-mission .photo .mo{
        display: block;
    }
    .way-mission .photo .pc{
        display: none;
    }
    .way-mission .photo .photo-txt{
        width: 100%;
    }
    .way-mission .photo .photo-txt h1{
        font-size: 26px;
        margin-bottom: 30px;
    }
    .way-mission .photo .photo-txt .mission_tit{
        font-size: 18px;
        line-height: 1.8rem;
        margin-bottom: 14px;
    }
    .way-mission .photo .photo-txt .mission_summary{
        font-size: 15px;
        line-height: 1.5rem;
        font-weight: 400;
        width: auto;
        font-weight: 400;
    }
    .new-way #sub_contents{
        padding: 60px 0px 70px;
    }
    .new-way #sub_contents.way-mission h2{
        margin: 60px 0 30px;
    }
    .way_intro::after{
        background-image: url(../images/company/round-bg-mo.png);
    }

}