@charset 'utf-8';

html, body{height: 100%;}

.main-section{
    display: flex;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    height: calc(100% - 80px - 152px);
}

.main-article{
    position: relative;
    display: none;
    width: 100%;
    align-items: center;
    margin: auto;
    transition: all 0.3s;
}

.main-article.active{
    display: flex;
}

.main-article .img-box{display:block; position: fixed; background-repeat: no-repeat; background-position: 10% center; top: 80px; left: 0px; right: 0; bottom: 152px; z-index: -1; overflow: hidden; height: 100%;}
.main-article:nth-of-type(1) .img-box{background-image: url('../img/main/dari.png');}
.main-article:nth-of-type(2) .img-box{background-image: url('../img/main/attendent.png');}
.main-article:nth-of-type(3) .img-box{background-image: url('../img/main/carier.png');} 

.main-article .text-box{max-width: 488px; width: 100%; margin-left: auto; z-index: 10; background-color: #f3f3ff88; padding: 2rem; border-radius: 2rem;}
.main-article .text-box span{font-weight: var(--font-bold); color: var(--color-main); line-height: 1.4;}
.main-article .text-box h1.title{font-weight: var(--font-bold); font-size: 3rem; margin-bottom: 1.5rem; line-height: 1.4;}
.main-article .text-box .cont{display: block; margin-top: 1.5rem; line-height: 1.6;}
.main-article .text-box .link-service{display: block; line-height: 1.5; font-size: 1.25rem; color: var(--color-main); font-weight: var(--font-bold); margin-top: 2rem;}
.main-article .text-box .link-service img{display:inline-block; vertical-align: middle; margin-left: 1rem;}
.main-article .text-box .btn-group{display: block; margin-top: 5rem;}
.main-article .text-box .btn-group a{padding: 1rem 4rem; border-radius: 25px; font-weight: var(--font-bold);}
.main-article .text-box .btn-group a.call{background-color: var(--color-main); color: var(--bg-white-1);}
.main-article .text-box .btn-group a.kakao-talk{ display: none; background-color: #FFE812;}
.main-article .text-box .btn-group a.kakao-talk img.icon{display: inline-block; margin-right: 4px; vertical-align: middle;}


@media (max-width: 1279px) {
    .main-article .img-box{background-position: center center;}
    .main-article .text-box{margin: 0 auto;}
 }

@media (max-width: 992px) {
    .main-article .img-box{width: 100%; background-size: cover;}
}

@media (max-width: 768px) {

}

@media (max-width: 576px) {

 }