/* ===============================================================
    * yonghwa
=============================================================== */
.yonghwa {display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: url(/img/yonghwa/bg.jpg) no-repeat center / cover;}
.yonghwa-wrap {width: 100%; padding: 0 70px;}
.yonghwa-wrap h2 {font-size: 60px; color: #fff; text-align: center;}
.yonghwa-wrap p {font-size: 20px; color: #fff; text-align: center; margin:30px 0 80px; opacity: 0.6;}
.yonghwa-item {width: calc((100% - 100px) / 6); margin-right: 20px;}
.yonghwa-item:last-of-type {margin-right: 0;}
.y-img {height: 300px; width: 100%; margin-bottom: 20px; overflow: hidden;}
.y-img.bg-img {background-size: auto 100%; transition: .3s;}
.y-img.bg-img:hover {background-size: auto 110%;}
.yonghwa-item h3 {font-size: 16px; letter-spacing: 0.04em; color: #fff;}
@media (max-width: 820px){
    .yonghwa {height: auto;}   
    .yonghwa-wrap {padding: 16.00vw 3.20vw 13.33vw;}
    .yonghwa-wrap h2 {font-size: 10.67vw;}
    .yonghwa-wrap p {font-size: 3.20vw; margin: 4.00vw 0 8.00vw;}
    .yonghwa-item {width: calc(50% - 1.34vw); margin-right: 2.67vw; margin-bottom: 6.67vw;}
    .yonghwa-item:nth-of-type(2n) {margin-right: 0;}
    .y-img {height: 53.33vw; margin-bottom: 2.67vw;}
    .yonghwa-item h3 {font-size: 4.00vw; text-align: center;}
}


/* ===============================================================
    * yonghwa-detail
=============================================================== */
.yonghwa.none-pc {display: none;}
.y-detail__wrap {position: relative; width: 100%; height: 100vh;}
.y-detail {width: 100%; height: 100%;}
.slide-bg {width: 100%; height: 100%;}
.slide-tit {position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); color: #fff; text-align: center;}
.slide-tit h2 {font-size: 50px; letter-spacing: 0.1em;}
.slide-tit p.font6 {margin: 10px 0 30px;}
.slide-tit h3 {font-size: 18px; letter-spacing: 0.2em; margin-bottom: 30px;}
.slide-tit .view-btn {margin: 0 auto; width: 200px; height: 44px; line-height: 44px; text-align: center; font-size: 14px; letter-spacing: 0.2em; color: #000; background: #fff; cursor: pointer;}

.slide-info {position: fixed; z-index: 990; left: 0; right: 0; top: 0; bottom: 0; background: rgba(34,34,34,.7); opacity: 0; visibility: hidden; transition: .3s;}
.slide-info.show {opacity: 1; visibility: visible;}
.slide-info__box {position: absolute; padding: 80px 40px; width: 60%; max-height: 65%; left: 50%; top: 50%; transform: translate(-50%,-50%); background: rgba(34,34,34,.7);}
.info-close {position: absolute; right: 35px; top: 35px; font-size: 30px; color: #fff; cursor: pointer;}
.slide-info__box h4 {font-size: 44px; color: #fff; margin-bottom: 15px;}
.slide-info__box h5 {font-size: 20px; letter-spacing: 0.1em; color: #fff;}
.info-txt {margin-top: 40px; height: calc(100% - 80px); font-size: 15px; line-height: 26px; color: rgba(255,255,255,.7); overflow-y: auto; text-align: center; padding: 0 20px;}
.info-txt::-webkit-scrollbar {width: 7px;}
.info-txt::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,.8); background-clip: padding-box; border-radius: 10px; border: 2px solid transparent;}
.info-txt::-webkit-scrollbar-track {background-color: rgba(255,255,255,.2); border-radius: 10px;}
@media (max-width: 820px){
    .yonghwa.none-pc {display: block;}
    .y-detail__wrap {height: auto;}
    .slide-bg {height: 56.27vw;}
    .slide-tit {position: static; transform: none; margin-top: 9.33vw; padding-bottom: 16.00vw; background: #fff;}
    .slide-tit h2 {font-size: 8.00vw; color: #222;}
    .slide-tit p.font6 {color: #ccc;}
    .slide-tit h3 {font-size: 4.73vw; color: #194052; margin: 4.00vw 0 8.00vw;}
    .slide-tit .view-btn {width: 36.67vw; height: 9.47vw; line-height: 9.47vw; font-size: 3.67vw; background: #194052; color: #fff;}

    .slide-info {background: rgba(34,34,34,.8);}
    .slide-info__box {width: calc(100% - 8.00vw); max-height: calc(100% - 8.00vw); padding: 16.00vw 2.67vw 16.00vw 0; background: rgba(34,34,34,.7);}
    .info-close {right: 4.67vw; top: 4.67vw; font-size: 6.67vw;}
    .slide-info__box h4 {font-size: 6.67vw; margin-bottom: 2.00vw;}
    .slide-info__box h5 {font-size: 3.73vw;}
    .info-txt {margin-top: 6.67vw; height: calc(100% - 16.00vw); font-size: 2.67vw; line-height: 4.00vw; padding: 0 1vw 0 4vw; text-align: center;}
}