@charset "utf-8";
/*----------------------------------------------------------------- 공통 ----------------------------------------*/
/*--------------------------------------------------------- FLEX ---------------------------*/
.sect_00 .wrapper { display: flex; width: 100%; height: 100%;} 
.sect_00 .wrapper > div { width: 50%; flex-basis: 50%; position: relative; } 
.sect_00 .main-left { background: no-repeat 50% / cover; background-image: url(../img/user/main/sect00_left.png); } 
.sect_00 .main-cont { position: absolute; bottom: 100px; left: 75px; } 
.sect_00 .main-cont .main-left--tit { font-size: 40px; line-height: 66px; margin-bottom: 40px; word-break: keep-all; } 
.sect_00 .main-cont .main-left--tit br.pc-ver { display: block; } 
.sect_00 .main-cont .main-left--tit br.mobile-ver { display: none; } 
.sect_00 .main-cont .main-left--subTit { font-size: 20px; } 
.sect_00 .main-right:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat 50% / cover; background-image: url(../img/user/main/main-right_bg.png); } 
.sect_00 .wrapper .main-video--bg { height: 100%; width: 100%; object-fit: cover; } 

.sect_01 .wrapper {display: flex;width: 100%;height: 100%;} 
.sect_01 .main-left { background-color: #fff; width: 50%; } 
.sect_01 .main-right { width: 50%; background: no-repeat 50% / cover; background-image: url(../img/user/main/sect01_right.png); } 
.sect_01 .main-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 100%; margin: 0 auto; } 
.sect_01 .main-center .main-cont { display: flex; justify-content: center; align-items: center; } 
.sect_01 .main-center .main-tit { font-size: 67px; font-weight: 700; text-align: right; } 
.sect_01 .main-center--video { width: 570px; height: 570px; margin: 0px 90px; background: #0A0A0A; border-radius: 50%; } 
.sect_01 .main-center--video video { width: 100%; height: 100%; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); border-radius: 50%; } 
.sect_01 .main-txt > li { display: flex; align-items: center; } 
.sect_01 .main-txt > li:not(:last-child) { margin-bottom: 50px; } 
.sect_01 .main-txt--num { font-size: 70px; font-weight: 700; color: #2A3157; margin-right: 35px; } 
.sect_01 .main-txt--cont {font-size: 20px;line-height: 34px;font-weight: 400;color: #2A3157;} 
.sect_01 .main-txt--cont b {display: block;color: #2A3157;} 

.sect_02 { background: no-repeat 50% / cover; background-color: #F3F4FA; background-image: url(../img/user/main/sect02_bg.png); } 
.sect_02 .wrapper { padding: 0 75px; padding-top: 100px; } 
.sect_02 .main-tit { font-family: 'Gmarket Sans'; font-size: 45px; } 
.sect_02 .main-subTit { font-size: 20px; font-weight: 300; margin-top: 5px; } 
.sect_02 .main-service { margin-top: 40px; position: relative; } 
.sect_02 .main-service > ul { display: flex; /* overflow-x: auto; */ } 
.sect_02 .main-service > ul > li { width: 417px; flex: none; } 
.sect_02 .main-service > ul > li:not(:last-child) { margin-right: 35px; } 
.sect_02 .main-service--box { width: 100%; height: 600px; background-color: #fff; border: 1px solid #F7F7F7; box-shadow: 3px 3px 10px rgba(0,0,0,0.1); border-radius: 10px; padding: 0 40px; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; } 
.sect_02 .main-service--box .main-service--txt { margin-top: 30px; padding-top: 30px; border-top: 1px solid #e4e4e4; width: 100%; } 
.sect_02 .main-service--txt .main-service--tit { font-size: 24px; font-weight: 700; } 

.sect_02 .main-service--txt .main-service--cont { margin-top: 30px; } 
.sect_02 .main-service--txt .main-service--cont p { font-size: 16px; font-weight: 300; } 
.sect_02 .main-service--txt .main-service--cont p { margin-bottom: 14px; line-height: 30px; } 
.sect_02 .main-service--txt .main-service--cont p span { display: block; margin-bottom: 15px; } 
.sect_02 .main-service--txt .main-service--cont p:last-child { margin-bottom: 0; } 

.sect_03 .wrapper { height: 100%; } 
.sect_03 .main-box {position: absolute;bottom: 0;left: 0;width: 75%;height: 25%;display: table;table-layout: fixed;border-collapse: collapse;} 
.sect_03 .main-box > div {width: calc(75% / 3);border: 1px solid #E4E4E4;display: table-cell;} 
.sect_03 .main-box > div:last-child { border-right: 0; } 
.sect_03 .main-box .main-tit_wrap {padding-right: 0;height: 100%;padding-top: 70px;padding-left: 40px;} 
.sect_03 .main-tit { font-family: 'Gmarket Sans'; font-size: 40px; } 
.sect_03 .main-subTit { font-size: 18px; font-weight: 300; margin-top: 5px; } 
.sect_03 .program { display: flex; width: 100%; height: 100%; } 
.sect_03 .program-list {width: 75%;height: calc(100vh - 234px);} 
.sect_03 .program-list > ul { width: 100%; height: 100%; } 
.sect_03 .program-list > ul > li { width: 100%; height: 100%; position: relative; } 
.sect_03 .program-cont { width: 100%; height: 100%; position: relative; } 
.sect_03 .program-cont--bg { display: table; width: 100%; height: 100%; table-layout: fixed; border-collapse: collapse; position: absolute; left: 0; top: 0; z-index: 11; opacity: 0.3; } 
.sect_03 .program-cont--bg .table-body { display: table-row-group; width: 100%; height: 100%; } 
.sect_03 .program-cont--bg .table-row { display: table-row; } 
.sect_03 .program-cont--bg .table-cell { display: table-cell; border: 0.5px solid #9497B9; height: 33.33333%; } 
.sect_03 .program-cont--bg .table-row .table-cell:not(.mobile-ver) { border-right: 0; } 
.sect_03 .program-cont--bg .table-row:last-child .table-cell { border-bottom: 0; } 
.sect_03 .program-img--txt {position: absolute;width: 100%;bottom: 0;text-align: center;background: no-repeat 50% / cover;background-image: url(../img/user/main/program-img--txt.png);color: #fff;z-index: 111;padding: 15px 0;font-family: 'Gmarket Sans';font-size: 30px;font-weight: 700;display: flex;align-items: center;justify-content: center;text-shadow: 0 0 6px rgba(0,0,0,0.3);} 
.sect_03 .program-img--txt span {font-size: 14px;font-weight: 400;margin-left: 10px;text-shadow: 0 0 6px rgb(0 0 0 / 30%);} 
.sect_03 .program-img--txt span br { display: none; } 
.sect_03 .program-menu {width: 25%;height: 100%;border-bottom: 1px solid #e4e4e4;} 
.sect_03 .program-menu > ul {display: table;table-layout: fixed;border-collapse: collapse;width: 100%;height: 100%;} 
.sect_03 .program-menu > ul > li {height: 25%;width: 100%;display: table-row;position: relative;} 
.sect_03 .program-menu > ul > li .btn { width: 100%; height: 100%; text-align: left; padding: 40px; display: inline-flex; align-items: flex-end; position: relative; font-family: 'Gmarket Sans'; font-size: 30px; font-weight: 700; position: relative; color: #000; } 
.sect_03 .program-menu > ul > li .btn:after { content: ''; position: absolute; top: 30px; right: 30px; background: no-repeat 50% / cover; width: 124px; height: 116px; } 
.sect_03 .program-menu > ul > li.active .btn { background-color: #EAEBF7; } 
.sect_03 .program-img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;background: no-repeat;background-size: 100% 100%;transform: scale(1) translateY(0);  transition: transform 5s ease;} 
.sect_03 .program-list > ul > li.swiper-slide-active .program-img{transform: scale(1.2) translateY(30px);}
.sect_03 .program-img--bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat 50% / cover; background-image: url(../img/user/main/program-video--bg.png); z-index: 111; } 
.sect_03 .program-list > ul > li:nth-child(1) .program-img { background-image: url(../img/user/main/main-program--img01.png); } 
.sect_03 .program-list > ul > li:nth-child(2) .program-img { background-image: url(../img/user/main/main-program--img02.png); } 
.sect_03 .program-list > ul > li:nth-child(3) .program-img { background-image: url(../img/user/main/main-program--img03.png); } 
.sect_03 .program-list > ul > li:nth-child(4) .program-img {background-image: url(../img/user/main/wait-img.png);background-color: #fff;} 
.sect_03 .program-menu > ul > li.active:after {content: '';position: absolute;bottom: -1px;left: -1px;width: 0;height: 2px;background: #8D91D0;-webkit-animation: aniPrgressbar 5s ease-in-out .1s;animation: aniPrgressbar 5s ease-in-out .1s;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;} 
@-webkit-keyframes aniPrgressbar { from { width: 0; } to { width: calc(100% - 40px); } }
@keyframes aniPrgressbar { from { width: 0; } to { width: calc(100% - 40px); } }
.sect_03 .link-btn {color: #fff; margin-left: 10px;}
.sect_03 .program-list > ul > li.swiper-slide-active:nth-child(4) .program-img {
    transform: none;
}

.sect_03 .program-img p {
    font-size: 45px;
    color: #2A3157;
    font-family: 'NanumSquare';
    font-weight: 800;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (min-width:1920px){
    .sect_02 .main-service > ul > li { width: 25%; flex: 1; } 
}
@media screen and (max-width:1919px){
    .sect_02 .main-service > ul { overflow-x: auto; } 
}

@media screen and (max-width:1450px) and (min-width:1300px){
    .sect_01 .main-center--video { max-width: 400px; height: 400px; margin: 0 20px; position: relative; } 
    .sect_01 .main-center--video video { position: absolute; left: 0; top: 0; } 
    .sect_01 .main-center .main-tit { word-break: keep-all; } 
}

@media screen and (max-width:1300px){
    .sect_00 .wrapper { flex-direction: column; } 
    .sect_00 .wrapper > div { width: 100%; flex-basis: auto; } 
    .sect_00 .main-left { height: 43%; background-image: url(../img/user/main/sect00_left-pad.png); background-position: 100%; } 
    .sect_00 .main-right { height: 57%; } 
    .sect_00 .main-cont { bottom: 45px; left: 20px; } 
    .sect_00 .main-cont .main-left--tit { font-size: 30px; line-height: 46px; margin-bottom: 5px; } 
    .sect_00 .main-cont .main-left--subTit { font-size: 16px; } 

    .sect_01 .main-center { max-width: 100%; } 
    .sect_01 .main-center .main-cont { flex-direction: column; } 
    .sect_01 .main-center .main-tit { font-size: 45px; text-align: center; } 
    .sect_01 .main-center--video { width: 362px; height: 362px; margin: 40px 0; } 
    .sect_01 .main-txt--num { font-size: 60px; } 
    .sect_01 .main-txt--cont { font-size: 18px; } 
    .sect_01 .main-txt > li:not(:last-child) { margin-bottom: 35px; } 

    .sect_02 .wrapper { padding: 0 20px; padding-top: 120px; } 
    .sect_02 .main-tit { font-size: 30px; } 
    .sect_02 .main-subTit { font-size: 16px; margin-top: 10px; } 
    .sect_02 .main-service > ul { overflow-x: auto; overflow-y: hidden; position: relative; } 
    .sect_02 .main-service:after { content: ''; width: 58px; height: 58px; background: no-repeat 50% / cover; background-image: url(../img/user/main/next-btn.svg); position: absolute; top: 50%; right: -8px; transform: translateY(-50%); } 
    .sect_02 .main-service > ul > li { width: calc(50% - 19px); flex: none; } 
    .sect_02 .main-service > ul > li:not(:last-child) { margin-right: 30px; } 
    .sect_02 .main-service--box { height: 500px; padding: 30px; width: 100%; } 
    .main-service--img { width: 200px; height: 200px; } 
    .main-service--img img { width: 100%; height: 100%; } 
    .sect_02 .main-service--txt .main-service--tit { font-size: 20px; } 
    .sect_02 .main-service--box .main-service--txt { margin-top: 25px; padding-top: 25px; } 
    .sect_02 .main-service--txt .main-service--cont p { margin-bottom: 5px; letter-spacing: -0.5px; } 
    .sect_02 .main-service--txt .main-service--cont { margin-top: 20px; width: calc(100% + 60px); margin-left: -30px; } 
    .sect_02 .main-service--txt .main-service--cont p span { letter-spacing: -1px; } 
    
    .sect_03 .main-box { position: relative; width: 100%; display: block; height: auto; padding: 135px 0 35px 20px; } 
    .sect_03 .main-box > div { width: 100%; border: 0; display: block; } 
    .sect_03 .main-tit { font-size: 30px; } 
    .sect_03 .main-tit br { display: none; } 
    .sect_03 .main-box .main-tit_wrap { width: 100%; padding: 0; } 
    .sect_03 .main-subTit { font-size: 16px; } 
    .sect_03 .program {display: block;} 
    .sect_03 .program-list { width: 100%; height: calc(100% / 3 * 2); } 
    .sect_03 .program-cont--bg { opacity: 0.5; } 
    .sect_03 .program-cont--bg .table-row:last-child { display: none; } 
    .sect_03 .program-cont--bg .table-cell.mobile-ver { display: table-cell !important; } 
    .sect_03 .program-menu {height: 256px;width: 100%;} 
    .sect_03 .program-menu > ul > li {display: table-cell;height: 200px;} 
    .sect_03 .program-menu > ul > li .btn { font-size: 16px; padding: 20px; line-height: 24px; padding-bottom: 25px; } 
    .sect_03 .program-menu > ul > li .btn:after { width: 64px; height: 60px; } 
    .sect_03 .program-menu > ul > li.active .btn { background-color: rgba(234,235,247,0.4); } 
    .sect_03 .program-img--txt { flex-direction: column; align-items: center; font-size: 20px; height: 90px; display: flex; align-items: center; justify-content: center; } 
    .sect_03 .program-img--txt span { font-size: 12px; margin: 0; margin-top: 5px; } 
    .sect_03 .program-list > ul > li:nth-child(1) .program-img { background-image: url(../img/user/main/main-program--img01-pad.png); background-size: cover; background-position: 50%; } 
    .sect_03 .program-list > ul > li:nth-child(2) .program-img { background-image: url(../img/user/main/main-program--img02-pad.png); } 
    .sect_03 .program-list > ul > li:nth-child(3) .program-img { background-image: url(../img/user/main/main-program--img03-pad.png); } 
    .sect_03 .program-img p {
        font-size: 26px;
    }
}


@media screen and (max-width:768px){
    .sect_00 .main-cont { bottom: 30px; left: 15px; } 
    .sect_00 .main-cont .main-left--tit { font-size: 24px; line-height: 35px; } 
    .sect_00 .main-cont .main-left--subTit { font-size: 14px; } 
    .sect_01 .main-center .main-tit { font-size: 30px; } 
    .sect_01 .main-center--video { width: 250px; height: 250px; margin: 25px 0; } 
    .sect_01 .main-txt--num { font-size: 50px; margin-right: 20px; } 
    .sect_01 .main-txt--cont { font-size: 14px; line-height: 26px; } 
    .sect_01 .main-txt > li:not(:last-child) { margin-bottom: 20px; } 
    .sect_02 .wrapper { padding: 0 15px; padding-top: 140px; padding-bottom: 160px; padding-right: 0; } 
    .sect_02 .main-tit { font-size: 28px; } 
    .sect_02 .main-subTit { font-size: 14px; margin-top: 5px; } 
    .sect_02 .main-service { margin-top: 20px; overflow: hidden; } 
    .sect_02 .main-service > ul > li { width: 284px; } 
    .sect_02 .main-service > ul > li:not(:last-child) { margin-right: 20px; } 
    .sect_02 .main-service--box { height: 408px; } 
    .sect_02 .main-service--box .main-service--txt { margin-top: 20px; padding-top: 20px; } 
    .sect_02 .main-service--txt .main-service--tit { font-size: 17px; } 
    .main-service--img { width: 154px; height: 154px; } 
    .sect_02 .main-service--txt .main-service--cont { margin-top: 15px; } 
    .sect_02 .main-service--txt .main-service--cont p { font-size: 14px; line-height: 28px; } 
    .sect_03 .main-box { padding: 0 15px; padding-top: 120px; padding-bottom: 25px; height: 200px; } 
    .sect_03 .main-tit { font-size: 26px; } 
    .sect_03 .main-subTit { font-size: 12px; margin-top: 5px; } 
    .sect_03 .program {} 
    .sect_03 .program-img--txt span { word-break: keep-all; } 
    .sect_03 .program-menu > ul > li .btn {padding: 15px;} 
    .sect_03 .program-menu > ul > li .btn:after { width: 55px; height: 55px; top: 20px; right: auto; left: 50%; transform: translateX(-50%); } 
    .sect_03 .program-list > ul > li:nth-child(1) .program-img {background-image: url(../img/user/main/main-program--img01-m.png);background-size: 100% 100%;} 
    .sect_03 .program-list > ul > li:nth-child(2) .program-img { background-image: url(../img/user/main/main-program--img02-m.png); } 
    .sect_03 .program-list > ul > li:nth-child(3) .program-img { background-image: url(../img/user/main/main-program--img03-m.png); } 
    .sect_03 .program-img--txt span br { display: block; } 
    .sect_03 .program-menu > ul > li.active:after { width: calc(100% - 20px); } 
    .sect_03 .program-list {min-height: 400px;}
    .sect_03 .program-menu {min-height: 200px;height: auto;border: 0;}
}

@media screen and (max-width:420px){
    .sect_01 .main-center--video { width: 200px; height: 200px; margin: 20px 0; } 
    .sect_01 .main-txt > li:not(:last-child) { margin-bottom: 10px; } 
    .sect_01 .wrapper { margin-top: 50px; height: calc(100% + 50px); } 
}