/**/
.section_1 { position: relative; padding:120px 0; margin:0; z-index:20; }
.section_1{background: white;}
.section_1 .cont_wrap{width: 100%; max-width: 980px; margin: 0 auto;}
.section_1 .cont1 .cont1_1{display: flex; align-items: center;  justify-content: space-between;  transition: background-color 0.3s ease;padding: 20px; border-bottom: 1px solid #222;
max-width: 980px; width: 100%; height: 120px; } 
.section_1 .cont1 .cont1_1 .cont1_tit{color: #222; font-size: 68px; font-weight: bold;}
.cont1_1:hover { background-color: #222;}
.cont1_hover { display: none;  transition: opacity 0.3s ease; margin-left: 20px; }
.cont1_hover img{width: 100%; max-width: fit-content;}
.cont1_hover>:nth-child(2) {margin-left: 20px; }
.cont1_1:hover .cont1_tit{color:white !important}
.cont1_1:hover .cont1_hover  { display: block; }
.section_1 .mouse_click {display: block; margin: 20px auto; text-align: center;}
.section_1 .mouse_click img{ max-width: 30px;}


@media all and (max-width:1024px) {

    .section_1 .cont_wrap{padding: 0 20px;}
    .section_1 .cont1 .cont1_1 .cont1_tit{font-size: 55px;}
    .cont1_tit.long{font-size: 48px !important}
}
@media all and (max-width:860px) {
    .section_1 {padding: 100px 0; margin:0; }
    .section_1 .cont1 .cont1_1 .cont1_tit{font-size: 50px;}
}

@media all and (max-width:768px) {  
    
    .section_1 {padding: 80px 0; margin:0; }
    .section_1 .big_tit{font-size: 48px;}
    .section_1 .cont1 .cont1_1{padding: 10px;height: 80px;}
    .section_1 .cont1 .cont1_1 .cont1_tit{ font-size: 40px;}
    .cont1_tit.long{font-size: 36px !important}
    .section_1 .cont1 .cont1_1 .cont1_hover>:nth-child(1){display: none;}
    .section_1 .cont1 .cont1_1 .cont1_hover .arrow{max-width: 16px;}
    .section_1 .mouse_click {display: block; margin: 20px auto; text-align: center;}
    .section_1 .mouse_click img{ max-width: 30px;}
}
@media screen and (max-width: 480px ) {
    
    .section_1 .cont1 .cont1_1{height: 60px; padding: 7px;}
    .section_1 .desc{font-size: 16px; word-break: keep-all;}
    .section_1 .cont1 .cont1_1 .cont1_tit{ font-size: 35px;}
    .cont1_tit.long{font-size: 28px !important}
}

@media screen and (max-width: 430px ) {
    .section_1 .cont1 .cont1_1 .cont1_tit{ font-size: 32px;}
    .section_1 {padding: 70px 0; margin:0; }
    .section_1 .cont1 .cont1_1 .cont1_hover{margin-left: 10px;}
    .section_1 .cont1 .cont1_1 .cont1_hover .arrow{max-width: 14px;}
}

@media screen and (max-width: 420px ) {
    .section_1 .cont1 .cont1_1{height: 55px;}
}
@media screen and (max-width: 380px ) {
    .cont1_tit.long{font-size: 26px !important}
    .section_1 .cont1 .cont1_1 .cont1_tit{ font-size: 30px;}
}
@media screen and (max-width: 350px ) {
    .cont1_tit.long{font-size: 25px !important}
    .section_1 .cont1 .cont1_1 .cont1_tit{ font-size: 28px;}
}

/**/
.story_spacer.one{background: #0373e5;}


.story_background { position: relative; transition: background-color 0.5s ease; z-index: 10; width: 100%; overflow: hidden; }
.story_spacer { padding: 500px 25px 700px 25px; } .story_scene { max-width: 1100px; width: 100%; margin: 0px auto; }
.story_section {}
.story_section:after { display: block; content: ''; clear: both; }
.section_title { position: fixed; top: 150px; z-index: 3; opacity: 1; transition: opacity 0.5s ease; }
.section_title.hidden { opacity: 0; }
.section_title h2 { font-size: 45px; color: #ffffff; line-height: 52px; margin-bottom: 30px; opacity: 0; }
.section_title p { font-size: 20px; color: #ffffff; line-height: 28px; opacity: 0; }
.section_list { position: relative; float: right; width: 40%; text-align: right; padding-top: 200px; opacity: 0; z-index: 4; }
.section_list .list_part { position: relative; margin-bottom: 30px; }
.section_list .list_part:last-child { margin-bottom: 0px; }
.story_spacer .section_list .list_part:nth-child(1) { z-index:5; /* 최상위 */ }
.story_spacer .section_list .list_part:nth-child(2) { z-index: 4; /* 10px 아래 */ }
.story_spacer .section_list .list_part:nth-child(3) { z-index: 3; /* 20px 아래 */ }
.story_spacer .section_list .list_part:nth-child(4) { z-index: 2; /* 30px 아래 */ }
.story_spacer .section_list .list_part:nth-child(5) { z-index: 1; /* 30px 아래 */ }
.section_list .list_part img { width:100%; }
.story_spacer.three .section_list, .story_spacer.four .section_list { position: relative; display: flex; flex-direction: column; align-items: center; margin: 100vh auto; /* Center start on page */ }


.story_spacer.three .section_list .list_part:nth-child(1),
.story_spacer.four .section_list .list_part:nth-child(1) {}
.story_spacer.three .section_list .list_part:nth-child(2),
.story_spacer.four .section_list .list_part:nth-child(2) {}
.story_spacer.three .section_list .list_part:nth-child(3),
.story_spacer.four .section_list .list_part:nth-child(3) {}
.story_spacer.three .section_list .list_part:nth-child(4),
.story_spacer.four .section_list .list_part:nth-child(4) {}
.story_spacer.three .section_list,
.story_spacer.four .section_list { position: relative; display: flex; flex-direction: column; align-items: center; margin: -10px auto; /* Center start on page */ }
.story_spacer.three .section_list .list_part,
.story_spacer.four .section_list .list_part { position: relative; width: 488px; padding-bottom: 70%; margin: 5px 0; opacity: 1; /* Ensure default is fully visible */ transform-origin: bottom right; /* Set rotation origin to bottom right */ transition: transform 2s ease-in-out, opacity 2s ease-in-out; /* Smooth transitions */ }
.story_spacer.three .section_list .list_part img,
.story_spacer.four .section_list .list_part img { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; object-fit: contain; }

@media all and (max-width:1280px) {
    .section_title {}
    .section_title h2 { margin-bottom: 25px; font-size: 28px !important; line-height: 36px !important;}
    .section_title p { font-size: 20px !important; width: 100%; max-width: 400px; word-break: keep-all;}
}
@media all and (max-width:768px) {
    .section_title h2 { margin-bottom: 20px; font-size: 28px !important; line-height: 34px !important;} 
    .section_title p { font-size: 18px !important; } .story_background { overflow: hidden; }
    .section_list { width: 100%; padding-top: 400px; }
    .section_list .list_part img { width: 100%; }
    .story_spacer .section_list .list_part:nth-child(1) { z-index: 4; /* 최상위 */ }
    .story_spacer .section_list .list_part:nth-child(2) { z-index: 3; /* 10px 아래 */ }
    .story_spacer .section_list .list_part:nth-child(3) { z-index: 2; /* 20px 아래 */ }
    .story_spacer .section_list .list_part:nth-child(4) { z-index: 1; /* 30px 아래 */ }
    .story_spacer.three .section_list .list_part:nth-child(1),
    .story_spacer.four .section_list .list_part:nth-child(1) {}
    .story_spacer.three .section_list .list_part:nth-child(2),
    .story_spacer.four .section_list .list_part:nth-child(2) {}
    .story_spacer.three .section_list .list_part:nth-child(3),
    .story_spacer.four .section_list .list_part:nth-child(3) {}
    .story_spacer.three .section_list .list_part:nth-child(4),
    .story_spacer.four .section_list .list_part:nth-child(4) {}
}
@media all and (max-width:460px) {
    .section_title {width: 100%; max-width: 300px; }
}




/**/


.main .section_news { background-color:white; text-align: center;padding:0; padding: 80px 40px; position: relative; z-index: 20;}
.main .section_news .news_title { position: relative; font-family: 'Inter' !important; font-size:30px; font-weight:300; margin-bottom:40px;  }
.section_news .two{display: flex}
.section_news .two .item:first-of-type{margin-right: 3%}

.main .section_news .news_cont { background-color:#ffffff; padding: 20px 0px; min-height:150px;  text-align: left;  position: relative;}
.main .section_news .news_cont .tag {  font-size:16px; margin-bottom:5px; }
.main .section_news .news_cont .tit { font-size:20px; }
.main .section_news .owl-prev { position: absolute; right: 40px; top: -80px;  width: 21px; height: 16px; background-image:url('../images/image/main_news_slide_left.png') !important; background-repeat:no-repeat; background-position:center; }
.main .section_news .owl-next { position: absolute; right: 0px; top: -80px; width: 21px; height: 16px;background-image:url('../images/image/main_news_slide_right.png') !important; background-repeat:no-repeat; background-position:center;  }
.main .section_news .owl-prev:hover { background-color:initial !important; }
.main .section_news .owl-next:hover { background-color:initial !important; }
.main .section_news .owl-prev span { font-size: 0px; }
.main .section_news .owl-next span { font-size: 0px; }

.main .section_news .news_thumb {position: relative; }
.main .section_news .news_thumb {overflow: hidden; border-radius: 30px;}
.main .section_news .news_thumb a img {transition: all 0.2s linear;height: 100%;width: 100%;object-fit: cover; }
.main .section_news .news_thumb a:hover img {filter: brightness(55%);transform: scale(1.2);transition: 0.3s ease-out;}
.main .section_news .news_thumb a::after {content: "+";position: absolute;  transform: translate(-50%, -50%);top: 50%;left: 50%; color: #fff;font-size: 8rem;opacity: 0;font-weight: 100}
.main .section_news .news_thumb:hover.news_thumb a::after {opacity: 1;transition: 0.3s ease-out; transform: translate(-50%, -50%) rotate(-180deg);}
.main .section_news .owl-theme .owl-nav{margin-top: 0 !important;}

@media screen and (max-width: 768px) {.main .section_news .news_thumb { border-radius: 15px;}
.main .section_news{padding: 40px 25px;}
.owl-theme .owl-nav{display: block !important;}

}

.banner { display: flex; justify-content: space-between; align-items: stretch; gap: 20px; overflow: hidden;  padding: 20px 0;}
.banner a {  display: flex;  align-items: center;  width: 50%;  height:230px;  text-align: center; border: 1px solid #ddd;}

.banner .open{background: url('../images/image/banner1.jpg')no-repeat; background-position: left center;background-color: white; border-radius: 30px ;
    justify-content: right; font-size: 24px; padding-right: 80px;}
.banner .quiz{background: url('../images/image/banner2.jpg')no-repeat; background-position: left center;background-color: white; border-radius: 30px;
    justify-content: right; font-size: 24px; padding-right: 80px;}

@media screen and (max-width: 1280px){
    .banner a{height: 200px;}
    .banner .open,.banner .quiz{border-radius: 24px;background-position:  center;   background-size: 100%; justify-content: center; padding-right: 0;  }
}

@media screen and (max-width: 768px) {
    .banner {
        display: block;
    }

    .banner>a {
        margin-bottom: 20px;
        width: 100%;
        height: 120px; 
    }
    .banner .open,.banner .quiz{
     justify-content: center;font-size: 18px; border-radius: 16px;}
}