@font-face {
    font-family: 'YeogiOttaeJalnanGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

.set_container{
    font-family: "Noto Sans KR","Sans-serif";
    color: #252525;
    min-width: 1780px;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.set_container a{
    display: inline-block;
}
.set_container button{
    font-family: "Noto Sans KR","Sans-serif";
}

.top_banner{
    background-image: url("../../images/2025/1023/top_bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: 1433px;
    position: relative;
    overflow: hidden;
}
.top_banner .image_box .line1{
    position: fixed;
    width: 1px;
    height: 100vh;
    top: 0;
    left: calc(50% - 600px);
    background-color: #000;
    z-index: 99;
}
.top_banner .image_box .line2{
    position: fixed;
    width: 1px;
    height: 100vh;
    top: 0;
    left: calc(50% + 600px);
    background-color: #000;
    z-index: 99;
}
.top_banner .image_box .line3{
    position: fixed;
    width: 1px;
    height: 100vh;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    z-index: 99;
}
.top_banner .banner_title{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 94px;
    left: 50%;
    transform: translateX(-50%);
}
.top_banner .banner_title strong{
    font-size: 30px;
    letter-spacing: -0.05em;
    font-weight: 700;
    color: #252525;
    position: relative;
    top: 0;
    opacity: 0;
    animation-name: text_ani;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.top_banner .banner_title img{
    margin-top: 31px;
    position: relative;
    top: 0;
    opacity: 0;
    animation-name: text_ani;
    animation-duration: .3s;
    animation-delay: .2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.top_banner .banner_title p{
    font-size: 26px;
    line-height: 41px;
    letter-spacing: -0.05em;
    color: #252525;
    font-weight: 400;
    margin-top: 21px;
    position: relative;
    top: 0;
    opacity: 0;
    animation-name: text_ani;
    animation-duration: .3s;
    animation-delay: .4s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.top_banner .banner_title p b{
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit
}

.top_banner .content_text{
    position: absolute;
    top: 490px;
    left: calc(50% - 329px);
    width: 660px;
    z-index: 1;
    height: 60px;
}
.top_banner .content_text p{
    font-size: 25px;
    letter-spacing: -0.05em;
    font-weight: 400;
    color: #000000;
    position: absolute;
    top: calc(50%);
    left: 76px;
    transform: translateY(-50%);
    opacity: 0;
    width: 535.11px;
    height: 60px;
    line-height: 56px;
    background-color: #fff;
}
.top_banner .content_text p.on{
    opacity: 1;
}

.top_banner .top_content{}
.top_banner .top_content .top_content_bg{
    position: absolute;
    top:419px;
    left: calc(50% + 1px);
    transform: translateX(-50%);
    opacity: 0;
    animation-name: text_ani2;
    animation-duration: .3s;
    animation-delay: .6s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.top_banner .top_content .top_content01{
    position: absolute;
    top: 620px;
    left: calc(50% - 516px);
    z-index: 1;
    transform: rotateY(90deg);
    animation-name: text_ani3;
    animation-duration: .5s;
    animation-delay: .8s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}
.top_banner .top_content .top_content02{
    position: absolute;
    top: 620px;
    left: calc(50%);
    transform: translateX(-50%) rotateY(90deg);
    animation-name: text_ani4;
    animation-duration: .5s;
    animation-delay: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}
.top_banner .top_content .top_content03{
    position: absolute;
    top: 620px;
    left: calc(50% + 184px);
    transform: rotateY(90deg);
    animation-name: text_ani3;
    animation-duration: .5s;
    animation-delay: 1.2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}
.top_banner .top_content p{
    font-size: 30px;
    letter-spacing: -0.05em;
    font-weight: 400;
    color: #000;
    position: absolute;
    top: 1144px;
    left: 50%;
    transform: translateX(-50%);
}
.top_banner .top_content p b{
    font-size: inherit;
    letter-spacing: inherit;
    font-weight: 700;
    color: inherit;
    color: #000;
}
.top_banner .top_content span{
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: #000;
    display: inline-block;
    position: absolute;
    top: 1197px;
    left: 50%;
    transform: translateX(-50%);
}
.top_banner .top_content .conetnt_text{
    position: absolute;
    top: 1277px;
    left: 50%;
    transform: translateX(-50%);
}
.top_banner .side{
    position: absolute;
    top: 275px;
    left: calc(50% + 593px);
    z-index: 111;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
.top_banner .side:hover{
    animation-name: side;
}
.top_banner .side.on{
    position: fixed;
    top: 275px;
    left: calc(50% + 593px);
}

@keyframes side {
    0%{
        margin-top: 0;
    }
    50%{
        margin-top: -10px;
    }
    100%{
        margin-top: 0
    }
}

@keyframes text_ani {
    0%{
        top: 30px;
        opacity: 0;
    }
    100%{
        top: 0px;
        opacity: 1;
    }
}

@keyframes text_ani2 {
    0%{
        margin-top: 30px;
        opacity: 0;
    }
    100%{
        margin-top: 0px;
        opacity: 1;
    }
}

@keyframes text_ani3 {
    0%{
        transform: rotateY(90deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}
@keyframes text_ani4 {
    0%{
        transform:translateX(-50%) rotateY(90deg);
    }
    100%{
        transform: translateX(-50%) rotateY(0deg);
    }
}

.program_container{
    background-color: #c7abff;
    padding-top: 80px;
    position: relative;
}
.program_container .scroll_nav{
    background-color: #634d8c;
    position: absolute;
    width: 100%;
    top: 0;
}
.program_container .scroll_nav.on{
    position: fixed;
    top: 49px;
    z-index: 99;
    box-shadow: 0px 1px 6px #00000077;
}

.program_container .scroll_nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1200px;
}
.program_container .scroll_nav ul li{
    flex: 1;
    border-left: 1px solid #473864;
}
.program_container .scroll_nav ul li:last-child{
    border-right: 1px solid #473864;
}
.program_container .scroll_nav ul li a{
    width: 100%;
    text-align: center;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.program_container .scroll_nav ul li:last-child a{
    background-image: url("../../images/2025/1023/scroll_text04_bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.program_container .scroll_nav ul li:last-child a img{
    opacity: 0;
}
.program_container .scroll_nav ul li a img{
    filter: invert(45%) sepia(33%) saturate(636%) hue-rotate(220deg) brightness(89%) contrast(91%);
}
.program_container .scroll_nav ul li:last-child a img{
    filter: unset;
}
.program_container .scroll_nav ul li.on a img{
    filter: unset;
}
.program_container .scroll_nav ul li:last-child.on a{
    background-image: url("../../images/2025/1023/scroll_text04_bg_on.png");
}

.program_container section{
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.program_container #section01{
    background-image: url("../../images/2025/1023/section01_bg.jpg");
    height: 1336px;
}
.program_container #section02{
    background-image: url("../../images/2025/1023/section02_bg.jpg");
    height: 1336px;
}
.program_container #section03{
    background-image: url("../../images/2025/1023/section03_bg.jpg");
    height: 1336px;
}
.program_container #section04{
    background-image: url("../../images/2025/1023/section04_bg.jpg");
    height: 2312px;
}
.program_container section .section_title{
    margin-top: 47px;
}
.program_container #section04 .section_title{
    margin-top: 50px;
}
.program_container #section01 .section_title img{
    margin-left: -39px;
}
.program_container #section04 .section_title img{
    margin-left: 5px;
}
.program_container section .section_title img{
    margin-left: -75px;
}
.program_container section .section_content{
    position: relative;
    margin-top: 60px;
}
.program_container section .section_content > span{
    opacity: 0;
    font-size: 0;
}
.program_container section .left_slide{
    position: absolute;
    top: 192px;
    left: calc(50% - 587px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.program_container section .right_slide{}
.program_container section .right_slide li{
    position: absolute;
    opacity: 0;
    transform: scale(0.98);
    transition: all .3s;
}
.program_container section .right_slide li.on{
    opacity: 1;
    transform: scale(1);
}
.program_container #section01 .right_slide li:nth-child(1){
    position: absolute;
    top: 158px;
    left: calc(50% + 55px);
}
.program_container #section01 .right_slide li:nth-child(2){
    position: absolute;
    top: 158px;
    left: calc(50% - 325px);
}
.program_container #section01 .right_slide li:nth-child(3){
    position: absolute;
    top: 453px;
    left: calc(50% - 37px);
}

.program_container #section02 .right_slide li:nth-child(1){
    position: absolute;
    top: 198px;
    left: calc(50% - 202px);
}
.program_container #section02 .right_slide li:nth-child(2){
    position: absolute;
    top: 273px;
    left: calc(50% + 166px);
}
.program_container #section02 .right_slide li:nth-child(3){
    position: absolute;
    top: 278px;
    left: calc(50% - 334px);
}

.program_container #section03 .right_slide li:nth-child(1){
    position: absolute;
    top: 158px;
    left: calc(50% + 148px);
}
.program_container #section03 .right_slide li:nth-child(2){
    position: absolute;
    top: 233px;
    left: calc(50% - 336px);
}
.program_container #section03 .right_slide li:nth-child(3){
    position: absolute;
    top: 537px;
    left: calc(50% - 146px);
}

.program_container #section04 .right_slide{
    position: absolute;
    top: 176px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    margin-left: -3px;
    gap: 42px;
    opacity: 0;
}
.program_container #section04 .right_slide li{
    position: unset;
}

.program_container section > a{
    margin-top: 52px;
    animation-duration: .3s;
}
.program_container section > a:hover{
    animation-name: buttonAni;
}
.program_container #section04 > a:hover{
    animation-name: unset;
}
.program_container #section04 > a:hover img{
    animation-name: buttonAni;
}
@keyframes buttonAni {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(2deg);
    }
    50%{
        transform: rotate(-2deg);
    }
    75%{
        transform: rotate(2deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

.program_container .pre_user{
    position: absolute;
    top: 1161px;
    left: 50%;
    transform: translateX(-50%);
}

.program_container .download_list li:nth-child(1){
    position: absolute;
    top: 1394px;
    left: calc(50% - 571px);
    opacity: 0;
}
.program_container .download_list li:nth-child(2){
    position: absolute;
    top: 1322px;
    left: calc(50% - 16px);
    opacity: 0;
}
.program_container #section04 > a{
    margin-top: 0;
    position: absolute;
    top: 2108px;
    left: 50%;
    transform: translateX(-50%);
}
.program_container #section04 > a img{
    position: relative;
    animation-duration: .3s;
}

.bottom_banner a{
    background-image: url("../../images/2025/1023/bottom_banner.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    display: inline-block
}

.conts_btn_top{position:fixed; left:50%; margin-left:680px; bottom:95px; z-index:9888; animation:topm 0.8s ease-in-out infinite; animation-play-state:paused;}
.conts_btn_top button{cursor:pointer; border:none; outline:none; display:block; background:url(https://www.bizforms.co.kr/magazine/content/hotclick/images/2020/201208/ico_top.png) 50% 50% no-repeat; text-indent:-9999px; opacity:0; width:0px; height:0px; -webkit-transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s; -moz-transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s; -ms-transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s; -o-transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s; transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s;}
.conts_btn_top:hover{animation-play-state:running; animation-fill-mode:forwards;}
.conts_btn_top.on button{opacity:0.5; width:50px; height:50px; -webkit-transition:opacity 1.0s; -moz-transition:opacity 1.0s; -ms-transition:opacity 1.0s; -o-transition:opacity 1.0s; transition:opacity 1.0s;}
.conts_btn_top.on:hover button{opacity:1;}