/* ===============================================================
    * service
=============================================================== */
.banner {position: relative; width: 100%; height: 300px;}
.banner h2 {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: 70px; letter-spacing: 0.04em; color: #fff;}

.sv-tab {background: #194052;}
.sv-list {display: flex; justify-content: space-between; align-items: center; height: 150px; border-left: 1px solid rgba(255,255,255,.3);}
.sv-item {position: relative; width: calc(100% / 7); height: 100%; border-right: 1px solid rgba(255,255,255,.3); cursor: pointer; transition: .3s;}
.sv-item a {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.sv-name {text-align: center; color: #fff;}
.sv-name i {font-size: 30px;}
.sv-name p {font-size: 14px; margin-top: 20px;}
.sv-item:hover, .sv-item.active {background: #fff;}
.sv-item:hover .sv-name, .sv-item.active .sv-name {color: #194052;}

.sv-content {padding: 100px 0 170px;}
.sv-cont__item {display: none;}
.sv-cont__item.active {display: flex; justify-content: space-between; align-items: flex-start;}
.sv-img {width: 50%; height: 360px;}
.sv-info {width: 50%; padding-left: 80px;}
.sv-tit {font-size: 20px; letter-spacing: 0.04em; color: #222; margin-bottom: 30px;}
.sv-desc {font-family: 'Noto Sans KR', sans-serif !important; font-size: 14px !important; line-height: 24px !important; font-weight: 300 !important; color: #777 !important;}
.sv-desc span, .sv-desc > * {font-family: inherit !important; font-size: inherit !important;}
.footer-btn {color: #194052;}
@media (max-width: 820px){
    .banner {display: none;}
    .sv-tab > .width-max {padding: 0;}
    .sv-list {flex-wrap: wrap; height: auto; border: none;}
    .sv-item {width: 50%; height: 23.60vw; border-bottom: 0.13vw solid rgba(255,255,255,.3);}
    .sv-name i {font-size: 6.67vw;}
    .sv-name p {font-size: 3.73vw; margin-top: 2.67vw;}

    .sv-content {padding: 10.67vw 0 16.00vw;}
    .sv-cont__item.active {display: block;}
    .sv-img {width: 100%; height: 51.73vw; margin-bottom: 10.67vw;}
    .sv-info {width: 100%; padding-left: 0; text-align: center;}
    .sv-tit {font-size: 4.27vw;}
    .sv-desc {font-size: 3.20vw !important; line-height: 4.53vw !important; text-align: center !important;}
    .sv-desc span, .sv-desc > * {text-align: center !important;}
}