/* ===============================================================
    * service
=============================================================== */
.service {padding: 150px 0 0;}
.service-list {position: relative; width: 100%; display: flex; justify-content: center; flex-wrap: wrap;}
.service-list:after {content: ''; position: absolute; width: 100%; height: 1px; left: 0; right: 0; top: 120px; background: #ccc;}
.service-list.js-bdnone:after {display: none;}
.service-item {cursor: pointer; width: 12.5%; text-align: center; height: 100px; border-right: 1px solid #ccc; border-top: none; border-bottom: none; margin-bottom: 40px;}
.service-item:nth-child(8), .service-item:last-child {border-right: none;}
.service-item span {display: block;}
.service-item .service-icon {font-size: 40px; color: #8e8e8f; padding-top: 10px; transition: .3s;}
.service-item .service-eng {font-size: 14px; opacity: 0; transition: .3s;}
.service-item .service-kor {font-size: 15px; color: #444;}
.service-item.js-service .service-icon, .service-item:hover .service-icon {color: #e3a259;}
.service-item.js-service .service-eng, .service-item:hover .service-eng {opacity: 1; padding: 7px 0 5px;}

.service-info {position: relative; margin-top: 80px;}
.service-box {position: absolute; left: 0; right: 0; top: 0; display: none;}
.service-box.js-service {display: block; position:static;}
.service-img {width: 100%;}
.service-img img {width: 100%; height: 100%; object-fit: cover;}
.service-txt {padding: 100px 0; text-align: center;}
.service-txt h2 {font-size: 34px; font-weight: 600; letter-spacing: 0.04em; color: #222;}
.service-txt h3 {font-size: 20px; margin: 30px 0;}
.service-content {font-size: 14px; line-height: 28px; color: #777;}
@media (max-width: 820px){
    .service {padding: 60px 0; overflow-x:hidden;}
    .service > .width-max:first-of-type {padding: 0;}
    .service-list {justify-content: flex-start; border-top: 1px solid #ccc;}
    .service-list:after {display: none;}
    .service-item {position: relative; width: 50%; margin-bottom: 0; padding-top: 10px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}
    /* .service-item:after {content: ''; position: absolute; width: 200%; height: 1px; background: #ccc; bottom: -10px; left: 0;} */
    .service-item.js-last:after {display: none;}
    .service-item:nth-child(8), .service-item:last-child {border-right: 1px solid #ccc;}
    /* .service-item:nth-child(3n) {border-right: none;} */
    .service-item .service-icon {font-size: 25px;}
    .service-item:nth-of-type(2n) {border-right: none;}

    .service-info {margin-top: 40px;}
    .service-img img {height: 194px;}
    .service-txt {padding: 40px 0;}
    .service-txt h2 {font-size: 24px;}
    .service-txt h3 {font-size: 17px; margin: 15px 0;}
    .service-content {line-height: 22px;}
}