@import url("common.css");
/* 공통 */
.tit_area h2 {margin: 8px 0 0; text-wrap: balance;}


/* Visual */
#visual {position: relative; width: 100%; height: var(--vh); overflow: hidden;}

#visual .visual_notice_wrap {position: absolute; top:110px; left:50%; transform: translateX(-50%); z-index: 99999; width: 95%; max-width: 1720px;}
#visual .visual_notice_wrap .swiper.visual_notice_swiper {background: rgba(255, 255, 255, 0.1); border-radius: 9999px; width: fit-content; max-width: 100%; margin: 0; padding: 8px 8px 8px 25px; overflow: hidden; height: 46px; box-sizing: border-box; max-width: 400px;}
#visual .visual_notice_wrap .swiper-slide {display: flex; align-items: center; justify-content: space-between; gap: 30px; height: 100%; box-sizing: border-box;}
#visual .visual_notice_wrap .swiper-slide .tbox {flex: 1; display: flex; align-items: center;}
#visual .visual_notice_wrap .swiper-slide .tbox time {order: 0; opacity: 0.7; flex-shrink: 0;}
#visual .visual_notice_wrap .swiper-slide .tbox::before {content: ''; width: 1px; height: 10px; background: rgba(255, 255, 255, 0.2); order: 1; margin: 0 12px;}
#visual .visual_notice_wrap .swiper-slide .tbox h3 {order: 2; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
#visual .visual_notice_wrap .swiper-slide .tbox h3 img {display: none;}
#visual .visual_notice_wrap .swiper-slide .visual_notice_icon {display: flex; align-items: center; justify-content: center; width: 30px; aspect-ratio: 1/1; background: var(--main); border-radius: 50%; transition: all 0.6s ease; position: relative;}
#visual .visual_notice_wrap .swiper-slide .visual_notice_icon img {transition: all 0.6s ease;}
#visual .visual_notice_wrap .swiper-slide .visual_notice_icon img:last-of-type {opacity: 0; visibility: hidden; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}

#visual .visual_notice_wrap .swiper-slide:hover .visual_notice_icon {background: var(--white);}
#visual .visual_notice_wrap .swiper-slide:hover .visual_notice_icon img:first-of-type {opacity: 0; visibility: hidden;}
#visual .visual_notice_wrap .swiper-slide:hover .visual_notice_icon img:last-of-type {opacity: 1; visibility: visible;}

#visual .visual_in .roll {height: var(--vh); position: relative; display: flex; align-items: center; justify-content: center; text-align: center;}
#visual .visual_in .roll .v_bg {position: absolute; top:0; left:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg {width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; top:0; left:0;}
#visual .visual_in .roll .v_bg .bg:not(.jarallax) {transform: scale(1.1); transition: transform 3s ease;}
#visual .visual_in .roll .v_bg .bg.bg_mo {display: none;}
#visual .visual_in .roll .v_bg .jarallax {width: 100%; height: 100%;}
#visual .visual_in .roll .v_txt {position: relative; z-index: 999;}
#visual .visual_in .roll .v_txt h2 {margin: 10px 0 40px; text-wrap: balance;}

#visual .visual_in .roll .v_txt > * {transform: translateY(100px); opacity: 0; transition: all 1.5s ease;}

#visual .visual_in .roll .v_txt p.fs18 {transition-delay: 0.5s;}
#visual .visual_in .roll .v_txt h2.fs60 {transition-delay: 0.8s;}
#visual .visual_in .roll .v_txt p.fs20 {transition-delay: 1.1s; text-wrap: balance;}

#visual .visual_in .roll.action .v_bg .bg {transform: scale(1);}
#visual .visual_in .roll.action .v_txt > * {transform: translateY(0); opacity: 1;}

#visual .visual_util {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1000;}
#visual .progress_bar {width: 100%; height: 3px; background-color: rgba(255, 255, 255, 0.2); border-radius: 5px;}
#visual .progress_bar .active_progress {height: 100%; background-color: #fff; border-radius: 5px; transform-origin: left center; transform: scaleX(0);}

#visual .visual_util_bottom {display: flex; align-items: center; justify-content: space-between; padding: 40px 0;}
#visual .visual_util_bottom_left {display: flex; align-items: center; gap: 30px;}
#visual .visual_util_bottom_right {display: flex; align-items: center;}

#visual .visual_util_bottom .pager {display: flex; gap: 10px;}
#visual .visual_util_bottom .pager span:not(.current) {opacity: 0.6;}
#visual .visual_util_bottom .visual_arrows {display: flex; gap: 20px;}
#visual .visual_util_bottom .visual_arrows a {display: flex; color: var(--white);}
#visual .visual_util_bottom .visual_arrows a:hover {color: var(--main);}
#visual .visual_util_bottom .visual_arrows a.prev::before {content: '\e5e0';}
#visual .visual_util_bottom .visual_arrows a.next::before {content: '\e5e1';}
#visual .visual_util_bottom .scroll_down {display: flex; align-items: center; gap: 15px;}
#visual .visual_util_bottom .scroll_down:hover {opacity: 0.4;}
#visual .visual_util_bottom .scroll_down .scroll_down_rectangle {width: 5px; height: 30px; background-color: rgba(255, 255, 255, 0.3); border-radius: 10px; position: relative;}
#visual .visual_util_bottom .scroll_down .scroll_down_rectangle::before {content: ''; display: block; width: 100%; height: 15px; background-color: var(--white); border-radius: 10px; position: absolute; top: 0; left: 0; animation: scroll_down_rectangle_animation 1.5s infinite; }

@keyframes scroll_down_rectangle_animation {
    0% {transform: translateY(0);}
    100% {transform: translateY(15px);}
}

/* Industries */
.industries_roll {margin-top: 15px;}
.industries_roll_tabs {display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 25px;}
.industries_roll_tab {display: inline-flex; align-items: center; gap: 5px; padding: 0 0 8px; color: var(--black); position: relative; opacity: 0.5; border-bottom: 1px solid rgba(26, 26, 26, 0.5); transition: all 0.6s ease;}
.industries_roll_tab:hover {opacity: 1;}
.industries_roll_tab.is-active {opacity: 1; border-color: var(--black);}
.industries_roll_tab.is-active .industries_roll_tab_label {font-weight: 600;}
.industries_roll_tab.is-active .industries_roll_tab_num {font-weight: 700;}
.industries_roll_swiper {width: 100%; overflow: hidden;}

.industries_roll_panel .industries_roll_content {min-height: 540px; height: 100%;}

.industries_roll_panel .industries_roll_content_left_blackbox {background: var(--black); display: flex; flex-direction: column; justify-content: space-between; padding: 40px;}

.industries_roll_panel .industries_roll_content_left_blackbox .tbox p.fs14 {opacity: 0.5;}
.industries_roll_panel .industries_roll_content_left_blackbox .tbox h3.fs24 {margin: 3px 0 20px;}
.industries_roll_panel .industries_roll_content_left_blackbox .tbox p.fs16 {opacity: 0.7;}

.industries_roll_panel .industries_roll_content_right_top {background-size: cover; background-position: center; background-repeat: no-repeat; padding: 40px; display: flex; flex-direction: column; justify-content: space-between;}
.industries_roll_panel .industries_roll_content_right_top .icon {display: inline-flex; margin-left: auto; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); width: 40px; aspect-ratio: 1/1;}
.industries_roll_panel .industries_roll_content_right_top .icon img {max-width: 100%; max-height: 100%; object-fit: cover; object-position: center;}
.industries_roll_panel .industries_roll_content_right_bottom {display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr);}
.industries_roll_panel .industries_roll_content_right_bottom_img {background-size: cover; background-position: center; background-repeat: no-repeat;}

.industries_roll_panel .industries_roll_content {display: flex; gap: 16px; height: 100%;}
.industries_roll_panel .industries_roll_content_left {width: 33.3333%; max-width: 456px; flex-shrink: 0;}
.industries_roll_panel .industries_roll_content_right {flex: 1; display: grid; gap: 16px; grid-template-rows: repeat(2, 1fr);}

#industries-panel-2 .industries_roll_content_right {grid-template-rows: 1fr; grid-template-columns: repeat(2, 1fr);}
#industries-panel-2 .industries_roll_content_right_bottom {grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr);}
#industries-panel-3 .industries_roll_content_left_blackbox {height: auto;}
#industries-panel-3 .industries_roll_content_left {max-width: unset; width: auto; flex: 1; display: grid; gap:16px; grid-template-rows: repeat(2,1fr);}
#industries-panel-3 .industries_roll_content_right {flex: unset; width: 33.3333%; flex-shrink: 0; max-width: 456px; grid-template-rows: 1fr;}

#industries-panel-4 .industries_roll_content_left_blackbox {height: 100%;}
#industries-panel-4 .industries_roll_content_right {grid-template-rows: 1fr; grid-template-columns: 1fr;}
#industries-panel-4 .industries_roll_content_right_bottom {grid-template-columns: 1fr; grid-template-rows: 1fr;}

/* Impact*/
#impact {overflow: hidden;}
#impact .impact_in {overflow: visible;}
#impact .impact_head {display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:50px; flex-wrap: wrap;}
#impact .impact_head .tit_area {flex:1;}
#impact .impact_nav {display:flex; flex-shrink:0; gap:10px;}
#impact .impact_nav_mo {display: none;}
#impact .impact_swiper {overflow: visible;}
#impact .impact_card {display:block;}
#impact .impact_card_link {display:block; overflow:hidden;}
#impact .impact_card_media {display:block; overflow:hidden; border: 1px solid var(--border); aspect-ratio: 446 / 297;}
#impact .impact_card_media img {display:block; width:100%; height: auto; object-fit:cover; object-position:center; transition: transform 0.6s ease;}
#impact .impact_card_body {margin-top:20px;}
#impact .impact_card_body .fs24 {margin:0 0 10px;}

#impact .impact_card_link:hover .impact_card_media img {transform: scale(1.1);}

/* Tech Blog */
#blog .swiper-slide {height:auto;}
#blog .blog_card {display:block; height: 100%;}
#blog .blog_head {margin-bottom: 50px;}
#blog .blog_card_link {display:block; overflow:hidden; height: 100%; display: flex; flex-direction: column;}
#blog .blog_card_media {display:block; overflow:hidden; border-radius: 10px 10px 0 0;}
#blog .blog_card_media img {display:block; width:100%; aspect-ratio:400 / 225; object-fit:cover; object-position:center; transition: transform 0.6s ease;}
#blog .blog_card_body {padding:40px; background: var(--white); border-radius: 0 0 10px 10px; transition: background 0.6s ease; flex: 1; display: flex; flex-direction: column;}
#blog .blog_card_title {margin:0 0 10px; transition: color 0.6s ease;}
#blog .blog_card_title img {display: none;}
#blog .blog_card_desc {margin:0 0 30px; transition: color 0.6s ease; flex: 1;}
#blog .blog_card_date {display: flex; align-items: center; gap: 5px; opacity: 0.5; transition: color 0.6s ease;}
#blog .blog_card_date::before {content: "\e8b5"; font-size: 18px;}

#blog .blog_card_link:hover .blog_card_media img {transform: scale(1.1);}
#blog .blog_card_link:hover .blog_card_body {background: var(--black);}
#blog .blog_card_link:hover .blog_card_title {color: var(--white);}
#blog .blog_card_link:hover .blog_card_desc {color: rgba(255, 255, 255, 0.7);}
#blog .blog_card_link:hover .blog_card_date {color: var(--white);}

#blog .blog_swiper_navi {display:flex; align-items:center; justify-content:space-between; max-width:500px; margin: 50px auto 0;}
#blog .blog_swiper_navi .page {display:flex; align-items:center}
#blog .blog_swiper_navi .page span.bar {width:200px; height:4px; background:var(--border); margin:0 15px; border-radius:999px; position:relative; overflow:hidden;}
#blog .blog_swiper_navi .page span.bar .bar_active {background:var(--black); width:0%; height:100%; border-radius:999px; position:absolute; top:0; left:0; transition:width 0.3s linear;}
#blog .blog_swiper_navi .page span:not(.bar) {color:var(--black);}

/*******************************************************************************
    @media 1560px
*******************************************************************************/
@media all and (max-width:1560px){
/* Industries */
.industries_roll_panel .industries_roll_content_left_blackbox .tbox h3.fs24 br {display: none;}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* Visual */
#visual .visual_notice_wrap {width: 90%;}

/* Tech Blog */
#blog .blog_card_body {padding: 25px;}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.tit_area h2 br {display: none;}
.tit_area h2 {margin: 2px 0 0;}
    
/* Industries */
.industries_roll_tabs {gap: 15px;}

.industries_roll_panel .industries_roll_content {gap: 5px;}
.industries_roll_panel .industries_roll_content_right {gap: 5px;}
.industries_roll_panel .industries_roll_content_right_bottom {gap: 5px;}

.industries_roll_panel .industries_roll_content_left_blackbox {padding: 25px;}
.industries_roll_panel .industries_roll_content_left_blackbox .tbox h3.fs24 {margin: 2px 0 15px;}

.industries_roll_panel .industries_roll_content_right_top {padding: 25px;}
.industries_roll_panel .industries_roll_content_right_top .icon {width: 35px; height: auto;}

#industries-panel-3 .industries_roll_content_left {gap: 5px;}

/* Impact */
#impact .impact_head {margin-bottom: 25px;}
#impact .impact_head .impact_nav {display: none;}
#impact .impact_nav_mo {display: flex; margin-top: 25px; gap: 5px;}
#impact .impact_card_body .fs24 {margin: 0 0 5px;}

/* Tech Blog */
#blog .blog_head {margin-bottom: 25px;}
#blog .blog_card_title {margin: 0 0 5px;}
#blog .blog_card_desc {margin: 0 0 20px;}
#blog .blog_swiper_navi {margin: 25px auto 0; max-width: 350px;}
#blog .blog_swiper_navi .page span.bar {width: 150px;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* Visual */
#visual .visual_notice_wrap {top: 80px;}
#visual .visual_notice_wrap .swiper-slide {gap: 15px;}
#visual .visual_notice_wrap .swiper.visual_notice_swiper {width: 100%;}
#visual .visual_notice_wrap .swiper-slide .tbox .fs14 {font-size: 14px;}

#visual .visual_in .roll .v_txt h2 {margin: 5px 0 20px;}

#visual .visual_in .roll .v_bg:has(.bg_mo) .bg.bg_pc {display: none;}
#visual .visual_in .roll .v_bg .bg.bg_mo {display: block;}

#visual .visual_util_bottom {padding: 20px 0;}
#visual .visual_util_bottom_left {gap: 20px;}
#visual .visual_util_bottom .pager {gap: 5px;}
#visual .visual_util_bottom .pager .fs14 {font-size: 14px;}
#visual .visual_util_bottom .visual_arrows {gap: 10px;}

/* Industries */
.industries_roll_panel .industries_roll_content {flex-direction: column; min-height: 510px;}
.industries_roll_panel .industries_roll_content_left {width: 100%; max-width: unset; flex: unset; flex-shrink: 0;}
.industries_roll_panel .industries_roll_content_left_blackbox .learn_more_btn {margin: 40px 0 0;}

.industries_roll_panel .industries_roll_content_right {display: flex; flex-direction: column;}
.industries_roll_panel .industries_roll_content_right_top span.fs16 {margin: 0 0 15px; display: block;}
.industries_roll_panel .industries_roll_content_right_bottom {flex:1}

#industries-panel-2 .industries_roll_content_right_bottom {grid-template-columns: repeat(2, 1fr); grid-template-rows: unset;}
#industries-panel-3 .industries_roll_content_left {display: flex; flex-direction: column;}
#industries-panel-3 .industries_roll_content_right {width: 100%; max-width: 100%;}

/* Impact */
#impact .swiper-slide {width: 87.5%;}
#impact .impact_card_body {margin-top: 15px;}

/* Tech Blog */
#blog .blog_swiper_navi {max-width: 280px;}
#blog .blog_swiper_navi .page span.bar {width: 100px;}
}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){
/* Visual */
#visual .visual_notice_wrap .swiper.visual_notice_swiper {height: 64px;}
#visual .visual_notice_wrap .swiper-slide .tbox {flex-direction: column; align-items: flex-start; gap: 0;}
#visual .visual_notice_wrap .swiper-slide .tbox::before {display: none;}
}