@charset "UTF-8"; /*------------------------------------------------------------------- 분류이름 : 공통요소 분류그룹 : 메인 섹션 -------------------------------------------------------------------*/ #container {position:relative; background-color: #000;} #container .btn-outline-more {min-width: 8rem;} .space-area {position: relative; background-color: #000;} .space-area .pin-spacer{inset: 0 !important; height: 100% !important;} .space-area #spaceBg {position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; max-height: none !important; background: url(../../../images/site/kor/main/bg_space.jpg) no-repeat center / cover;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #container :focus-visible {outline: 2px dashed #fff; outline-offset: -0.2rem;} #container [data-color="white"]:focus-visible {outline-color: var(--color-blue-50); outline-offset: -0.3rem;} /*------------------------------------------------------------------- 분류이름 : 슬라이드 컨트롤 분류그룹 : 메인 섹션 > 공통요소 -------------------------------------------------------------------*/ #container .slide-ctrl[data-s-type="basic"] {display: flex; gap: 0 3.2rem; align-items: center;} #container .slide-ctrl[data-s-type="basic"] .btn-ctrl {display: block; background-color: transparent; background-repeat: no-repeat; background-position: center;} #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-prev, #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-next {width: 1.9rem; height: 3.5rem; background-size: contain;} #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-pause {width: 1.4rem; height: 2rem; background-image: url(../../../images/site/kor/common/i_pause_white.svg); background-size: 2.4rem;} #container .slide-ctrl[data-s-type="basic"] .wrap {display: flex; min-width: 6rem; justify-content: space-between; align-items: center;} #container .slide-ctrl[data-s-type="basic"] .paging {display: flex; font-size: 1.6rem; text-align: center; color: #fff;} #container .slide-ctrl[data-s-type="basic"] .paging .num {display: block; min-width: 0.6em;} /*------------------------------------------------------------------- @variation -------------------------------------------------------------------*/ #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-prev {background-image: url(../../../images/site/kor/main/i_arr_prev.svg);} #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-next {background-image: url(../../../images/site/kor/main/i_arr_next.svg);} #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-pause.stop {background-image: url(../../../images/site/kor/common/i_play_white.svg);} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #container .slide-ctrl[data-s-type="basic"] .btn-ctrl {transition: background-image 0.3s;} #container .slide-ctrl[data-s-type="basic"] .btn-prev:focus-visible, #container .slide-ctrl[data-s-type="basic"] .btn-prev:hover {background-image: url(../../../images/site/kor/main/i_arr_prev_active.svg);} #container .slide-ctrl[data-s-type="basic"] .btn-next:focus-visible, #container .slide-ctrl[data-s-type="basic"] .btn-next:hover {background-image: url(../../../images/site/kor/main/i_arr_next_active.svg);} #container .slide-ctrl[data-s-type="basic"] .btn-pause:focus-visible, #container .slide-ctrl[data-s-type="basic"] .btn-pause:hover {background-image: url(../../../images/site/kor/common/i_pause_blue30.svg);} #container .slide-ctrl[data-s-type="basic"] .btn-pause.stop:focus-visible, #container .slide-ctrl[data-s-type="basic"] .btn-pause.stop:hover {background-image: url(../../../images/site/kor/common/i_play_blue30.svg);} #container .slide-ctrl[data-s-type="basic"] .btn-pause:focus-visible {outline-offset: 0;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1024px) { #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-prev, #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-next {width: 1.7rem; height: 3.2rem;} } @media screen and (max-width: 600px) { .space-area #spaceBg{background-position: bottom center;} #container .slide-ctrl[data-s-type="basic"] {gap: 0 2.8rem;} #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-prev, #container .slide-ctrl[data-s-type="basic"] .btn-ctrl.btn-next {width: 1.2rem; height: 2.4rem;} #container .slide-ctrl[data-s-type="basic"] .wrap {min-width: 5.2rem;} } /*------------------------------------------------------------------- 분류이름 : 탭박스 헤드 분류그룹 : 메인 섹션 > 공통요소 -------------------------------------------------------------------*/ #container .bod-tab-head {display: flex; overflow-x: auto; overflow-y: hidden; gap: 2.8rem; align-items: center;} #container .bod-tab-head > li {display: block;} #container .bod-tab-head > li .btn-toggle-tab {display: block; position: relative; padding: 0 0.6rem 1.5rem; background-color: transparent; line-height: 1; font-weight: 500; font-size: 1.8rem; white-space: nowrap; color: #fff;} #container .bod-tab-head > li .btn-toggle-tab::after {content:""; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--sp-02); background-color: var(--color-blue-30);} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #container .bod-tab-head > li .btn-toggle-tab {transition: background 0.4s, color 0.4s;} #container .bod-tab-head > li .btn-toggle-tab:focus-visible, #container .bod-tab-head > li .btn-toggle-tab:hover {color: var(--color-blue-30);} #container .bod-tab-head > li .btn-toggle-tab::after {transform: scaleX(0); transform-origin: center; transition: background 0.4s, transform 0.4s;} #container .bod-tab-head > li .btn-toggle-tab.active::after {background-color: #fff; transform: scaleX(1);} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 768px) { #container .bod-tab-head {gap: 1rem; flex-wrap: wrap;} #container .bod-tab-head > li {width: calc(100% / 3 - (1rem * 2 / 3));} #container .bod-tab-head > li .btn-toggle-tab {width: 100%; padding: 0.8rem 0.4rem; border-radius: 0.4rem; justify-content: center;} #container .bod-tab-head > li .btn-toggle-tab::after {display: none;} #container .bod-tab-head > li .btn-toggle-tab.active {background-color: var(--color-blue-40);} } @media screen and (max-width: 600px) { #container .bod-tab-head {gap: 0.6rem;} #container .bod-tab-head > li {width: calc(100% / 3 - (0.6rem * 2 / 3));} #container .bod-tab-head > li .btn-toggle-tab {font-size: 1.5rem;} #container .tab_wrap{} #container .tab_wrap .bod-tab-head{overflow-y: auto; flex-wrap: nowrap;} #container .tab_wrap .bod-tab-head > li {min-width: 11rem;} } @media screen and (max-width: 375px) { #container .bod-tab-head > li .btn-toggle-tab {font-size: 1.4rem;} #container .tab_wrap .bod-tab-head > li {min-width: 11rem;} } /*------------------------------------------------------------------- 분류이름 : 가로스크롤 영역 분류그룹 : 메인 섹션 > 공통요소 -------------------------------------------------------------------*/ /* #container .hrzn-scroll-box {overflow: hidden; position: relative;} #container .hrzn-scroll-box .scroll-wrap {position: relative; overflow-x: auto; overflow-y: hidden;} #container .hrzn-scroll-box .btn-ctrl {display: none; position: absolute; top: 0; width: 4rem; height: 100%; z-index: 1;} #container .hrzn-scroll-box .btn-ctrl::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center;} #container .hrzn-scroll-box .btn-prev {left: 0; background: linear-gradient(-90deg, rgba(22,22,22,0) 0%, rgba(22,22,22,1) 70%);} #container .hrzn-scroll-box .btn-prev::before {background-image: url(../../../images/site/kor/common/i_arr_prev_white.svg);} #container .hrzn-scroll-box .btn-next {right: 0; background: linear-gradient(90deg, rgba(22,22,22,0) 0%, rgba(22,22,22,1) 70%);} #container .hrzn-scroll-box .btn-next::before {background-image: url(../../../images/site/kor/common/i_arr_next_white.svg);} */ /* 스크롤바 커스텀 */ @media (hover: hover) and (pointer: fine) { /* #container .hrzn-scroll-box .scroll-wrap::-webkit-scrollbar {width: 4px; height: 4px; box-sizing: content-box;} #container .hrzn-scroll-box .scroll-wrap::-webkit-scrollbar-thumb {border-radius: 4px; background: #999;} #container .hrzn-scroll-box .scroll-wrap::-webkit-scrollbar-track {padding: 0 0.4rem; border-radius: 1rem; background: #555555;} */ } /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ /* #container .hrzn-scroll-box[data-progress="mid"] .btn-prev, #container .hrzn-scroll-box[data-progress="mid"] .btn-next, #container .hrzn-scroll-box[data-progress="start"] .btn-prev, #container .hrzn-scroll-box[data-progress="end"] .btn-next {display: block;} #container .hrzn-scroll-box .btn-prev:focus-visible::before, #container .hrzn-scroll-box .btn-prev:hover::before {background-image: url(../../../images/site/kor/common/i_arr_prev_blue30.svg);} #container .hrzn-scroll-box .btn-next:focus-visible::before, #container .hrzn-scroll-box .btn-next:hover::before {background-image: url(../../../images/site/kor/common/i_arr_next_blue30.svg);} */ /*------------------------------------------------------------------- 분류이름 : 공통 애니메이션 분류그룹 : 공통요소 -------------------------------------------------------------------*/ @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes upAni { 0% {opacity: 0; transform: translateY(4rem);} 100% {opacity: 1; transform: translateY(0);} } @keyframes downAni { 0% {opacity: 0; transform: translateY(-4rem);} 100% {opacity: 1; transform: translateY(0);} } @keyframes leftAni { 0% {opacity: 0; transform: translateX(-4rem);} 100% {opacity: 1; transform: translateX(0);} } @keyframes rightAni { 0% {opacity: 0; transform: translateX(4rem);} 100% {opacity: 1; transform: translateX(0);} } @keyframes upOnlyAni { 0% {transform: translateY(4rem);} 100% {transform: translateY(0);} } @keyframes downOnlyAni { 0% {transform: translateY(-4rem);} 100% {transform: translateY(0);} } @keyframes leftOnlyAni { 0% {transform: translateX(-4rem);} 100% {transform: translateX(0);} } @keyframes rightOnlyAni { 0% {transform: translateX(4rem);} 100% {transform: translateX(0);} } /*------------------------------------------------------------------- 분류이름 : visual 분류그룹 : 메인 섹션 -------------------------------------------------------------------*/ #visual {display: block; position: relative; z-index: 1; height: calc(100vh + 6rem); min-height: 100vh; /*padding-bottom: 16rem;*/} /*#visual {height: calc(var(--vh) * 100);}*/ #visual .inner {display: flex; position: relative; /*max-width: 1440px;*/ width: 100%; height: 100%; align-items: flex-end; margin: 0 auto;} #visual .section-wrap {display: flex; overflow: hidden; position: relative; z-index: 1; width: 100%; height: 100%; /* margin: auto auto 11rem auto; justify-content: flex-end;*/} #visual .section-wrap .scene-box{width: 100%; height: 100%;} #visual .section-wrap {overflow: visible;} #visual .section-wrap .scene-box{height: calc(100vh);} #visual .section-wrap .slide-area {display: block; overflow: hidden; position: relative; width: 100%; height: 100%;} #visual .section-wrap .slide-container {display: block; overflow: hidden; width: 100%; height: 100%;} #visual .section-wrap .slide-container .swiper-slide {display: block; position: relative; z-index: 0; color: #ccc; background-color: #000;} #visual .section-wrap .slide-container .swiper-slide.swiper-slide-active{z-index: 2; } #visual .section-wrap .slide-container .swiper-slide.vdo{overflow: hidden; position: relative; width: 100vw; height: 0; padding-top: 56.25%;} #visual .section-wrap .slide-container .swiper-slide.vdo:before, #visual .section-wrap .slide-container .swiper-slide.video >div:before{ content: ""; display: block; position: absolute; top: calc(100vh - 8rem); left: 0; z-index: 2; width: 100%; height: 8rem; background: linear-gradient(0, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.00) 100%); } #visual .section-wrap .slide-container .swiper-slide.vdo:after{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent;} /*아이프레임*/ #visual .section-wrap .slide-container .swiper-slide.vdo [data-window-ratio="hrzn"].ifr{width: 100%; height: auto;} #visual .section-wrap .slide-container .swiper-slide.vdo [data-window-ratio="vrtl"].ifr {width: auto; height: 100%;} #visual .section-wrap .slide-container .swiper-slide.vdo .ifr {display: block; overflow: hidden; position: absolute; top: 0; left: 50%; width: 100%; aspect-ratio: 16/9; pointer-events: none; transform: translateX(-50%);} #visual .section-wrap .slide-container .swiper-slide.vdo .ifr iframe {width: 300%; height: 100%; margin-left: -100%} /* 비디오 */ #visual .section-wrap .slide-container .swiper-slide.video >div{overflow: hidden; position: relative; width: 100%; height: 100%; } #visual .section-wrap .slide-container .swiper-slide.video >div:before{top: auto; bottom: 0;} #visual .section-wrap .slide-container .swiper-slide.video video{ position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.5s linear; transition: opacity 0.5s linear; } /* 애니메이션 요소 */ #visual .ani {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #visual #rndScrolls1 #rndObjects1{} #visual .obj{position: absolute; top: 0; left: calc((100% - 1480px) / 2); width: 100%;/* max-width: 1480px; */height: 100vh;} #visual .obj >*{position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain;} #visual .obj >*::before{content: ""; display: block;} #visual .obj[data-ani-obj="0"] [data-s-type="1"]{top: 32.69vh; left: 2.98%; width: 5.729vw; max-width: 11rem; background-image: url(../../../images/site/kor/main/img_visual_02.png);} #visual .obj[data-ani-obj="0"] [data-s-type="1"]::before {padding-top: 121.818%;} #visual .obj[data-ani-obj="0"] [data-s-type="2"] {top: 19.3vh; left: 13.88%; width: 44vw; max-width: 85.7rem; background-image: url(../../../images/site/kor/main/img_visual_01.png);} #visual .obj[data-ani-obj="0"] [data-s-type="2"]::before {padding-top: 35.589%;} #visual .obj[data-ani-obj="1"] [data-s-type="1"]{top: -2vh; left: -16%; width: 57vw; max-width: 108.5rem; background-image: url(../../../images/site/kor/main/img_visual_033.png); transform-origin: bottom left; } #visual .obj[data-ani-obj="1"] [data-s-type="1"]::before {padding-top: 62.212%;} #visual .obj[data-ani-obj="3"] [data-s-type="1"]{top: 5vh; left: 7%; width: 22.04vw; max-width: 42.3rem; background-image: url(../../../images/site/kor/main/img_visual_04.png); transform-origin: right center; } #visual .obj[data-ani-obj="3"] [data-s-type="1"]::before {padding-top: 145.393%;} /* 텍스트 요소 */ #visual .text-area{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-end; position: absolute; bottom: 0; left: 50%; z-index: 2; width: 100%; height: auto; max-width: 1640px; padding: 0 2rem 16rem; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } #visual .text-area .in{width: 100%; max-width: 1510px; padding: 0 4rem 13rem; text-align: right;} #visual .text-area .in span{display: block; margin-right: -0.5rem; font-size: 2.8rem; line-height: 1; font-weight: 300; color: #fff; text-indent: -5rem; letter-spacing: 0.83rem;} #visual .text-area .in strong{display: block; margin-top: 2rem; font-size: 6.4rem; line-height: 1.3; color: #fff;} #visual .text-area .in b{overflow: hidden; display: block; width: 100%; max-width: 49rem; height: 2.3rem; margin: 0 0 0 auto; background: url(../../../images/site/kor/main/txt_visual.png) no-repeat center center / 100% auto; text-indent: 9999px;} #visual .text-area .slide-ctrl{position: absolute; top: 0; left: 0; width: 100%;} #visual .text-area .slide-ctrl .btn-ctrl.btn-prev, #visual .text-area .slide-ctrl .btn-ctrl.btn-next{position: absolute; top: 0; left: 2rem; width: 1.9rem; height: 3rem; background-image: url(../../../images/site/kor/main/i_arr_prev_visual.png);} #visual .text-area .slide-ctrl .btn-ctrl.btn-next{left: auto; right: 2rem; width: 1.9rem; height: 3rem; background-image: url(../../../images/site/kor/main/i_arr_next_visual.png);} #visual .text-area .slide-ctrl.btn-next{} #visual .text-area .slide-ctrl .hidden{display: none;} /* 비주얼 타입2 #visualSlide2 */ #visualSlide2{overflow: visible; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: flex-start; align-items: center; width: 100%; height: 100%; position: relative; background-color: #000;} #visualSlide2:before{content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 11; width: 100%; height: 19rem; background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 85%);} #visualSlide2 .slide_w{display: block; position: relative; width: 100%; max-width: 1640px; height: auto; margin: 0 auto; padding: 0 10rem; padding-bottom: 16rem;} #visualSlide2 .slide_w:before{content: ""; display: block; position: absolute; top: 0;left: -50%; z-index: 1; width: 200vw; height: calc(100% + 16rem); background-color: rgba(0,0,0,0.7);} #visualSlide2 .slide_w{} #visualSlide2 .bgs{ overflow: hidden; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; -webkit-transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1); transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1); } #visualSlide2 .bgs span{ position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #visualSlide2 .bgs span{ opacity: 0; -webkit-transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1); transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1); } #visualSlide2 .bgs span.active{opacity: 1; animation: visualBgAni2 2s;} #visualSlide2 .swiper{} #visualSlide2 .swiper .swiper-wrapper{padding: 4.2rem 0; height: auto; display: flex; flex-wrap: nowrap; align-items: center; align-items: stretch;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide{ opacity: 1; display: flex; position: relative; height: auto; flex-wrap: wrap; align-content: center; align-items: center; transition: opacity 0.2s linear; } #visualSlide2 .swiper .swiper-wrapper .swiper-slide >div{position: relative; opacity: 0; width: 100%;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.prev >div, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-prev >div, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-next >div{display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; position: absolute; top: 0; left: 0; width: 28rem !important; height: 100%; padding-right: 2rem;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-next >div{left: auto; right: 0; padding-left: 2rem; padding-right: 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active{width: 100%; padding: 0 28rem;/* padding: 0 15rem 0 3rem;*/ } #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active >div{padding: 0 14rem 0 3rem; border: 1px solid rgba(255, 255, 255, 0.2); border-top: none; border-bottom: none;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.ani_start{opacity: 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-prev, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-next, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.ani_stop{opacity: 1 !important;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide >div, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.ani_start >div{opacity: 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-prev >div, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-next >div, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.ani_stop >div{opacity: 1;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide .category{display: none; visibility: hidden; opacity: 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .category{visibility: visible; opacity: 1; display: block; font-size: 2rem; color: #85b1ff;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide .tit{color: #999; font-size: 1.8rem; letter-spacing: -0.025rem;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .tit{ display: inline-block; position: relative; width: auto; max-width: 100%; font-size: 3.4rem; color: #fff; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; -webkit-transition: background-size .3s; transition: background-size .3s; } #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active:hover .tit{background-size: 100% 1px;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide .btn{visibility: hidden; opacity: 0; position: absolute; bottom: 0; right: 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btn{visibility: visible; opacity: 1; position: absolute; bottom: 0; right: 4.2rem;} #visualSlide2 .btn-prev, #visualSlide2 .btn-next{position: absolute; top: 6.75rem; z-index: 111; display: block; width: 1.9rem; height: 3rem; background: url(../../../images/site/kor/main/i_arr_prev_visual.png) no-repeat center center / 100% auto; cursor: pointer;} #visualSlide2 .btn-prev{left: 2rem;} #visualSlide2 .btn-next{ right: 2rem; -webkit-transform: rotate(180deg); transform: rotate(180deg); } /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #visual #visualSlide{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #visual #visualSlide #rndBg1{position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #visual #visualSlide #rndBg1 .bg{ /*visibility: hidden;*/ opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; transition:/* visibility 0s 0.2s,*/ opacity 0.2s/*, transform 0.8s linear*/; } #visual #visualSlide #rndBg1 .bg[data-ani-obj="0"]{z-index: 1;} #visual #visualSlide #rndBg1 .bg.swiper-slide-active{ /*visibility: visible; opacity: 1; z-index: 2; transition: visibility 0s 0s, opacity 0s;*/ animation: visualBgAni 2s; } #visual #visualSlide #rndObjects1{} #visual #visualSlide #rndBg1 .bg, #visual #visualSlide #rndObjects1 .obj{ visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0s; } #visual #visualSlide #rndBg1 .bg.swiper-slide-active, #visual #visualSlide #rndObjects1 .obj.active{ visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0s 0.2s; } #visual #visualSlide #rndObjects1 .obj >*{ z-index: 1; transition: transform 0.2s linear; } #visual #visualSlide #rndObjects1 .obj[data-ani-obj="0"].active [data-s-type="1"]{animation: viusalObj1 0.8s;} #visual #visualSlide #rndObjects1 .obj[data-ani-obj="0"].active [data-s-type="2"]{animation: viusalObj2 0.8s;} #visual #visualSlide #rndObjects1 .obj[data-ani-obj="1"].active [data-s-type="1"]{animation: viusalObj3 0.6s;} #visual #visualSlide #rndObjects1 .obj[data-ani-obj="3"].active [data-s-type="1"]{animation: viusalObj3 0.8s;} #visual[data-ani-state="end"] #visualSlide #rndObjects1 .obj[data-ani-obj="0"].active [data-s-type="1"]{animation: visualMBg 12s infinite; animation-delay: 0.2s;} #visual[data-ani-state="end"] #visualSlide #rndObjects1 .obj[data-ani-obj="0"].active [data-s-type="2"]{animation: visualMBg 10s infinite; animation-delay: 0.8s;} #visual[data-ani-state="end"] #visualSlide #rndObjects1 .obj[data-ani-obj="1"].active [data-s-type="1"]{animation: visualMBg 12s infinite; animation-delay: 0.4s;} #visual[data-ani-state="end"] #visualSlide #rndObjects1 .obj[data-ani-obj="3"].active [data-s-type="1"]{animation: visualMBg 12s infinite; animation-delay: 0.4s;} #visual .section-wrap .slide-area {animation: visualSlideAni 0.6s;} #visual .section-wrap .slide-container .swiper-slide .tit::before {transform: scaleY(0); transition: transform 0.3s; transform-origin: center bottom;} #visual .section-wrap .slide-container .swiper-slide .tit:focus-visible::before, #visual .section-wrap .slide-container .swiper-slide .tit:hover::before {transform: scaleY(1);} @keyframes visualBgAni { 0% {opacity: 0; transform: scale(1.1);} 20% {opacity: 1;} 100% {opacity: 1; transform: scale(1);} } @keyframes visualBgAni2 { 0% {transform: translate(-50%,-50%) scale(1.1);} 100% {transform: translate(-50%,-50%) scale(1);} } @keyframes viusalObj1 { 0% {opacity: 0; transform: translate(-3vw, 3vw);} 100% {opacity: 1; transform: translate(0, 0);} } @keyframes viusalObj2 { 0% {opacity: 0; transform: translate(-10vw, 10vw);} 100% {opacity: 1; transform: translate(0, 0);} } @keyframes viusalObj3 { 0% {opacity: 0; transform: scale(0) translate(0,0);} 100% {opacity: 1; transform: scale(1) translate(0, 0);} } @keyframes visualSlideAni { 0% {opacity: 0; transform: translateY(50%);} 100% {opacity: 1; transform: translateY(0);} } /* mobile animation */ @keyframes visualObjs { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes visualMBg { 0% {transform: translate(0, 0);} 25% {transform: translate(7.5px, -5px);} 50% {transform: translate(-5px, 10px);} 75% {transform: translate(5px, -7.5px);} 100% {transform: translate(0, 0);} } @keyframes visualMObj { 0% {transform: translate(0, 0);} 25% {transform: translate(4%, -3%);} 50% {transform: translate(-2%, 4%);} 75% {transform: translate(3%, -2%);} 100% {transform: translate(0, 0);} } /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1480px) { #visual {height: 100vh; padding-bottom: 8.8rem;} #visual .section-wrap {overflow: visible; margin-bottom: 6rem;} #visual .section-wrap .scene-box{height: calc(100vh + 16em);} #visual .inner {max-width: 100%;} #visual .text-area{padding-bottom: 0;} #visual .text-area .in{padding-bottom: 8rem;} #visual .text-area .in span{font-size: 2.4rem;} #visual .text-area .in strong{font-size: 5.8rem;} #visual .text-area .in b{width: calc(49rem * 0.9); height: calc(2.3rem * 0.9);} #visual .obj{left: 0;} #visual .obj[data-ani-obj="0"] [data-s-type="1"]{top: 40.69vh;} #visual .obj[data-ani-obj="0"] [data-s-type="2"]{top: 27.3vh;} #visual .obj[data-ani-obj="1"] [data-s-type="1"]{top: 18vh; left: -6%; width: 60vw;} #visual .obj[data-ani-obj="3"] [data-s-type="1"]{top: 21vh; left: 15%; width: 25.04vw;} #visual .section-wrap .slide-container .swiper-slide.vdo{padding-top: 100vh;} /*#visual .section-wrap .slide-container .swiper-slide.vdo iframe{width: 1920px; height: 100vh;} */ #visualSlide2 .slide_w{padding: 0 8.8rem;} #visualSlide2 .swiper .swiper-wrapper{padding: 3.6rem 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active{padding: 0 22rem;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.prev >div, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-prev >div, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-next >div{width: 22rem !important;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .category{font-size: 1.8rem;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .tit{font-size: 2.6rem;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btn{right: 3rem;} #visualSlide2 .btn-prev, #visualSlide2 .btn-next{top: 5.25rem;} } @media screen and (max-width: 1024px) { #visual {overflow: hidden; height: 800px /*100vh*/; min-height: auto; padding-bottom: 12.8rem;} #visual .section-wrap .slide-container {width: 48rem;} #visual .section-wrap .slide-container .swiper-slide .tit {margin-bottom: 2rem; font-size: 3.2rem;} #visual .section-wrap .scene-box{height: 800px;} #visual .section-wrap .slide-container .swiper-slide.vdo{height: auto; padding-top: 0; } #visual .section-wrap .slide-container .swiper-slide.vdo:before{top: auto; bottom: 0;} /*#visual .section-wrap .slide-container .swiper-slide.vdo iframe{width: 1920px; height: 800px;}*/ #visual #visualSlide{} #visual .text-area .in{width: 100%; margin-right: 0;/* padding: 0;*/ padding-bottom: 0;} #visual .text-area .in span{font-size: 2.3rem; letter-spacing: 0.56rem;} #visual .text-area .in strong{margin-top: 1.75rem; font-size: 5rem;} #visual .text-area .in b{width: calc(49rem * 0.775); height: calc(2.3rem * 0.775);} /*#visual .text-area .slide-ctrl{display: none;}*/ #visual .text-area .slide-ctrl .btn-ctrl.btn-prev, #visual .text-area .slide-ctrl .btn-ctrl.btn-next{width: calc(1.9rem * 0.8); height: calc(3rem * 0.8);} #visual .text-area .slide-ctrl .btn-ctrl.btn-prev:before, #visual .text-area .slide-ctrl .btn-ctrl.btn-next:before{ content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #visual #visualSlide #rndObjects1 .obj{left: 0;} #visual .obj[data-ani-obj="0"] [data-s-type="1"]{top: 37.75vh; left: 7.93%; width: 8.2vw; max-width: 7rem;} #visual .obj[data-ani-obj="0"] [data-s-type="2"]{top: 25.875vh; left: 22.65%; width: 63.411vw; max-width: 50rem;} #visual .obj[data-ani-obj="1"] [data-s-type="1"]{top: 16vh; left: -8%; width: 73vw; max-width: 63rem;} #visual .obj[data-ani-obj="3"] [data-s-type="1"]{top: 21vh; left: 15%; width: 29.04vw;} #visualSlide2 .slide_w{padding: 0 8rem;}#visualSlide2 .swiper .swiper-wrapper .swiper-slide, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active{width: 100%;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active{padding: 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.prev >div, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-prev >div, #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-next >div{opacity: 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active >div{padding: 0 10rem 0 0; border: none;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .category{font-size: 1.6rem;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .tit{font-size: 2.4rem;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .btn{right: 0;} #visualSlide2 .btn-prev, #visualSlide2 .btn-next{top: 5rem; width: 1.6rem; height: 2.5rem;} } @media screen and (max-width: 768px) { #visual {padding-bottom: 13.2rem;} #visual .section-wrap .slide-area {width: 100%;} #visual .section-wrap .slide-container {width: auto;} } @media screen and (max-width: 600px) { #visual {height: 800px; padding-bottom: 16rem;} #visual .section-wrap {margin-bottom: 4rem;} #visual .section-wrap .slide-container .swiper-slide .category {margin-bottom: 1.4rem; font-size: 1.7rem;} #visual .section-wrap .slide-container .swiper-slide .tit {margin-bottom: 3.2rem; font-size: 2.2rem;} #visual .section-wrap .slide-container .swiper-slide .txt {display: none;} #visual #visualSlide #rndObjects1 .obj[data-ani-obj="0"] [data-s-type="1"]{top: 36.75vh; left: 5.5%; width: 10.4vw; max-width: 5.1rem;} #visual #visualSlide #rndObjects1 .obj[data-ani-obj="0"] [data-s-type="2"]{top: 26vh; left: 14%; width: 80vw; max-width: 39.3rem;} #visual .text-area .in{padding: 0 3rem 4vh;} #visual .text-area .in span{font-size: 1.8rem;} #visual .text-area .in strong{margin-top: 1.5rem; font-size: 4.2rem;} #visual .text-area .in b{width: calc(49rem * 0.65); height: calc(2.3rem * 0.65);} #visual .obj[data-ani-obj="3"] [data-s-type="1"]{top: 18vh; left: 10%; width: 45vw;} #visual .obj[data-ani-obj="1"] [data-s-type="1"]{top: 16.5vh; width: 90vw; max-width: 48rem;} #visual .text-area .slide-ctrl .btn-ctrl.btn-prev, #visual .text-area .slide-ctrl .btn-ctrl.btn-next{width: calc(1.9rem* 0.7); height: calc(3rem* 0.7);} #visualSlide2 .slide_w{padding: 0 6rem;} #visualSlide2 .swiper .swiper-wrapper{padding: 2.5rem 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active{padding: 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active >div{padding: 0;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .category{font-size: 1.4rem;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .tit{font-size: 2.2rem;} #visualSlide2 .swiper .swiper-wrapper .swiper-slide .btn{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; text-indent: -9999px; } #visualSlide2 .swiper .swiper-wrapper .swiper-slide .btn:hover{background-color: transparent;} #visualSlide2 .btn-prev, #visualSlide2 .btn-next{top: 4rem; width: 1.3rem; height: 2.1rem;} #visualSlide2 .bgs{height: calc(100% + 16rem);} /* interaction */ #visual .ani .bg {animation: visualMBg 30s infinite;} #visual .ani .objs {animation: visualObjs 1s;} #visual #visualSlide #rndObjects1 .obj[data-ani-obj="0"] [data-s-type="1"]{animation: visualMObj 20s infinite;} #visual #visualSlide #rndObjects1 .obj[data-ani-obj="0"] [data-s-type="2"]{animation: visualMObj 22s infinite;} } @media screen and (max-width: 480px) { #visual .text-area .in span{font-size: 1.6rem; letter-spacing: 0.5rem;} #visual .text-area .in strong{margin-top: 1.25rem; font-size: 3.7rem;} #visual .text-area .in b{width: calc(49rem * 0.576); height: calc(2.3rem * 0.576);} } @media screen and (max-width: 400px) { #visual {height: 600px;} #visual .text-area .in{padding: 0 2.5rem 0;} #visual .text-area .in span{font-size: 1.4rem; letter-spacing: 0.45rem;} #visual .text-area .in strong{margin-top: 1.1rem; font-size: 3.3rem;} #visual .text-area .in b{width: calc(49rem * 0.51); height: calc(2.3rem * 0.51);} #visual #visualSlide #rndObjects1 .obj[data-ani-obj="0"] [data-s-type="1"]{top: 26rem;} #visual #visualSlide #rndObjects1 .obj[data-ani-obj="0"] [data-s-type="2"]{top: 17rem;} #visual .obj[data-ani-obj="1"] [data-s-type="1"]{top: 12rem; width: 86vw;} #visual .obj[data-ani-obj="3"] [data-s-type="1"]{top: 14rem; left: 10%; width: 80vw; max-width: 14rem;} #visual .text-area .slide-ctrl .btn-ctrl.btn-prev, #visual .text-area .slide-ctrl .btn-ctrl.btn-next{width: calc(1.9rem * 0.6); height: calc(3rem * 0.6);} #visual .section-wrap .scene-box{height: 600px;} } @media screen and (max-width: 360px) { #visual .text-area .in span{font-size: 1.3rem; letter-spacing: 0.35rem;} #visual .text-area .in strong{margin-top: 1.1rem; font-size: 2.9rem;} #visual .text-area .in b{width: calc(49rem * 0.45); height: calc(2.3rem * 0.458);} } /*------------------------------------------------------------------- 분류이름 : section01 분류그룹 : 메인 섹션 -------------------------------------------------------------------*/ #section01 {display: block; position: relative; z-index: 2; margin-top: -16rem;} #section01 .inner {display: block; max-width: 1640px; width: 100%; margin: 0 auto; padding: 0 2rem;} #section01 .inner > .section-wrap {display: block; border-radius: 2rem; background-color: rgba(37,37,37,0.6);} /* 퀵메뉴 */ #section01 .quick-area {display: block; border-radius: 2rem 2rem 0 0;} #section01 .quick-area .quick-list {display: flex; flex-wrap: wrap; justify-content: space-between; height: 10rem; padding: 2rem 8rem; border-radius: 2rem 2rem 0 0; background-color: rgba(22,22,22,0.6);} #section01 .quick-area .quick-list > li {display: block; /*flex-basis: 0; flex-grow: 1;*/} #section01 .quick-area .quick-list > li .link { display: flex; position: relative; height: 100%; padding-left: 7rem; padding-right: 0.8rem; line-height: 1.2; font-size: 1.8rem; font-weight: 500; color: #fff; align-items: center; -webkit-transition: color 0.2s; transition: color 0.2s; } #section01 .quick-area .quick-list > li .link::before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 1em; height: 6rem; margin-top: -3rem; font-size: 6rem; background: url(../../../images/site/eng/main/i_quick_all.png) no-repeat; background-size: auto 100%; transition: all 0.2s linear; } #section01 .quick-area .quick-list > li .link:hover{color: var(--color-blue-30);} #section01 .quick-area .quick-list > li .link:hover:before{animation-name:upAni22; animation-duration: 1s; animation-iteration-count:infinite;} @keyframes upAni22 { 0% {transform: translateY(0);} 50% {transform: translateY(-0.5rem);} 100% {transform: translateY(0);} } /* 뉴스룸 */ #section01 #newsRoom {display: block; padding: 8.6rem 8rem 10rem;} #section01 #newsRoom > .hd {display: flex; justify-content: space-between;} #section01 #newsRoom > .hd > h2 {display: block; margin-right: auto; line-height: 1; font-weight: 900; font-size: 4rem; color: #fff;} #section01 #newsRoom > .bd {display: block; margin-top: 6.5rem;} #section01 #newsRoom > .bd .list {display: flex; overflow: hidden; gap: 4rem;} #section01 #newsRoom > .bd .list > li {display: block; width: calc(25% - (4rem * 3 / 4));} #section01 #newsRoom > .bd .list > li .item {display: block; position: relative;} #section01 #newsRoom > .bd .list > li .item::before {content:""; position: absolute; top: 0; right: 0; width: 2rem; height: 2rem; background: url(../../../images/site/kor/common/i_arr_next_blue30.svg) no-repeat center / contain;} #section01 #newsRoom > .bd .list > li .item > .category {display: block; position: relative; margin-bottom: 2.4rem; padding-left: 1rem; line-height: 1; color: var(--color-blue-30);} #section01 #newsRoom > .bd .list > li .item > .category::before {content: ""; position : absolute; top: 0; left: 0; width: 2px; height: 1.4rem; background-color: var(--color-blue-50);} #section01 #newsRoom > .bd .list > li .item > .con {display: flex; min-height: 11rem; margin-bottom: 1rem; color: #dddddd; gap: 0.8rem;} #section01 #newsRoom > .bd .list > li .item > .con .tit {display: block; overflow: hidden; height: calc(1.4em * 3); line-height: 1.4; font-weight: 600; font-size: 1.8rem; color: #dddddd; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: break-word;} #section01 #newsRoom > .bd .list > li .item > .con .img {display: none; overflow: hidden; width: 11rem; height: 11rem; margin-left: auto; border: 1px solid #333333; border-radius: 0.4rem; flex-shrink: 0;} #section01 #newsRoom > .bd .list > li .item > .con .img > img {display: block; width: 100%; height: 100%; object-fit: cover;} #section01 #newsRoom > .bd .list > li .item .date {display: block; padding-bottom: 2rem; border-bottom: 1px solid #444444; line-height: 1; color: #999999;} #section01 #newsRoom > .bd .slide-ctrl {display: none;} /*------------------------------------------------------------------- @variation -------------------------------------------------------------------*/ /* 가로스크롤 */ #section01 #newsRoom .hrzn-scroll-box .btn-ctrl.btn-prev {background: linear-gradient(-90deg, rgba(37,37,37,0) 0%, rgba(37,37,37,0.6) 30%);} #section01 #newsRoom .hrzn-scroll-box .btn-ctrl.btn-next {background: linear-gradient(90deg, rgba(37,37,37,0) 0%, rgba(37,37,37,0.6) 30%);} #section01 .quick-list > li .link[data-s-icon="1"]::before {background-position: 0 50%;} #section01 .quick-list > li .link[data-s-icon="2"]::before {background-position: -1em 50%;} #section01 .quick-list > li .link[data-s-icon="3"]::before {background-position: -2em 50%;} #section01 .quick-list > li .link[data-s-icon="4"]::before {background-position: -3em 50%;} #section01 .quick-list > li .link[data-s-icon="5"]::before {background-position: -4em 50%;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #section01 {transform: translateY(16rem); animation: sc01Ani 0.7s 0.2s forwards;} #section01 #newsRoom > .hd {opacity: 0;} #section01 #newsRoom.finded > .hd {animation: upAni 0.4s forwards;} #section01 #newsRoom > .bd {opacity: 0;} #section01 #newsRoom.finded > .bd {animation: upAni 0.4s 0.1s forwards;} /* mouse hover */ #section01 #newsRoom > .bd .list > li .item::before {opacity: 0; transform: translateX(-25%); transition: opacity 0.5s, transform 0.5s;} #section01 #newsRoom > .bd .list > li .item:focus-visible:before, #section01 #newsRoom > .bd .list > li .item:hover:before {opacity: 1; transform: translateX(0);} #section01 #newsRoom > .bd .list > li .item > .con .tit {transition: color 0.4s;} #section01 #newsRoom > .bd .list > li .item:focus-visible > .con .tit, #section01 #newsRoom > .bd .list > li .item:hover > .con .tit {color: #fff; text-decoration: underline;} #section01 #newsRoom > .bd .list > li .item .date {transition: color 0.4s;} #section01 #newsRoom > .bd .list > li .item:focus-visible .date, #section01 #newsRoom > .bd .list > li .item:hover .date {color: #ddd;} #section01 #newsRoom > .bd .list > li .item > .con .img > img {transform-origin: center; transition: transform 0.4s;} #section01 #newsRoom > .bd .list > li .item:focus-visible > .con .img > img, #section01 #newsRoom > .bd .list > li .item:hover > .con .img > img {transform: scale(1.1);} @keyframes sc01Ani { 0% {transform: translateY(16rem);} 100% {transform: translateY(0);} } /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1480px) { #section01 {margin-top: -8.8rem;} #section01 .quick-area .quick-list {padding: 1rem 3.2rem; height: 8.8rem;} #section01 .quick-area .quick-list > li .link {padding-left: 6.5rem;} #section01 #newsRoom {padding: 4rem 3.2rem;} #section01 #newsRoom > .bd .list {gap: 2rem;} #section01 #newsRoom > .bd .list > li {width: calc(25% - (2rem * 3 / 4));} #section01 #newsRoom > .bd .list > li .item > .con .tit {font-size: 1.7rem;} } @media screen and (max-width: 1200px) { #section01 .quick-area .quick-list > li .link {padding-left: 4.8rem;} #section01 .quick-area .quick-list > li .link::before {width: 4rem; height: 4rem; margin-top: -2rem; font-size: 4rem; background-size: auto 100%;} } @media screen and (max-width: 1024px) { #section01 {margin-top: -12.8rem;} #section01 #newsRoom > .hd {display: block;} #section01 #newsRoom > .hd > h2 {margin-bottom: 3.2rem; font-size: 3.4rem;} #section01 #newsRoom > .bd {margin-top: 3.2rem;} #section01 #newsRoom > .bd .list {flex-wrap: wrap;} #section01 #newsRoom > .bd .list > li {width: calc(50% - 1rem);} #section01 #newsRoom > .bd .list > li .item > .con {margin-bottom: 1.6rem;} } @media screen and (max-width: 1023px) { #section01 .quick-area .quick-list {height: auto; flex-wrap: wrap; gap: 1.2rem 0;} #section01 .quick-area .quick-list > li {width: 50%; flex-basis: auto;} #section01 .quick-area .quick-list > li:nth-child(n+3) {width: 33.333%;} #section01 .quick-area .quick-list > li .link {min-height: 5rem; padding-left: 0; align-items: center; justify-content: center; gap: 0.8rem;} #section01 .quick-area .quick-list > li .link::before{position: relative; top: auto; margin-top: 0;} #section01 .quick-area .quick-list > li .link >a{} } @media screen and (max-width: 768px) { #section01 {margin-top: -13.2rem;} #section01 .quick-area .quick-list {padding: 1rem 2.4rem;} } @media screen and (max-width: 640px) { #section01 .quick-area .quick-list {padding: 1rem 1.6rem; border-radius: 1.6rem 1.6rem 0 0;} #section01 .quick-area .quick-list > li .link {flex-wrap: wrap; padding-left: 0.2rem; padding-right: 0.2rem; font-size: 1.4rem; text-align: center; gap: 0rem;} #section01 .quick-area .quick-list > li .link::before {font-size: 3.5rem; width: 3.5rem; height: 3.5rem;} #section01 .quick-area .quick-list > li .link > span {display: flex; width: 100%; height: 2.4em; align-items: center; justify-content: center;} } @media screen and (max-width: 600px) { #section01 {margin-top: -16rem;} #section01 .inner > .section-wrap {border-radius: 1.6rem;} #section01 #newsRoom {padding: 3.2rem 2rem 4rem;} #section01 #newsRoom > .hd > h2 {font-size: 3.2rem;} #section01 #newsRoom > .bd .list > li {width: 100%;} #section01 #newsRoom > .bd .list > li:nth-child(n+3) {display: none;} #section01 #newsRoom > .bd .list > li .item > .con {min-height: 0; margin-bottom: 1rem;} #section01 #newsRoom > .bd .list > li .item > .con .img {width: 9rem; height: 9rem;} #section01 #newsRoom > .bd .list > li .item > .con .tit {font-size: 1.6rem;} #section01 #newsRoom > .hd > h2{margin-bottom: 2.4rem;} #section01 #newsRoom > .bd .list > li .item > .category{margin-bottom: 1.4rem;} #section01 #newsRoom > .bd .list > li .item > .con .tit{height: auto; max-height: calc(1.4em * 3);} } @media screen and (max-width: 375px) { #section01 .quick-area .quick-list > li .link {font-size: 1.3rem;} } /*------------------------------------------------------------------- 분류이름 : section02 분류그룹 : 메인 섹션 -------------------------------------------------------------------*/ #section02 {display: flex; overflow: hidden; position: relative; z-index: 1; padding: 10rem 0;} #section02::before {content:""; display: block; width: calc((100% - 1440px) / 2); flex-shrink: 0;} #section02 .section-wrap {display: block; overflow: hidden; flex-grow: 1;} #section02 .section-wrap > .hd {display: flex; max-width: 1440px; justify-content: space-between;} #section02 .section-wrap > .hd > h2 {display: block; margin-right: auto; line-height: 1; font-weight: 900; font-size: 4rem; color: #fff;} #section02 .section-wrap > .hd > .hrzn-scroll-box {margin-right: -0.6rem;} #section02 .section-wrap > .bd {display: block; margin-top: 5rem;} #section02 .section-wrap > .bd .slide-container {display: block; overflow: hidden; margin-right: -12rem;} #section02 .section-wrap > .bd .slide-container .item {display: block;} #section02 .section-wrap > .bd .slide-container .item > .img-box {display: block; overflow: hidden; position: relative; margin-bottom: 3.2rem; padding-top: 56.25%; border-radius: 0.6rem;} #section02 .section-wrap > .bd .slide-container .item > .img-box > img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} #section02 .section-wrap > .bd .slide-container .item > .hd {display: flex; margin-bottom: 2.8rem; justify-content: space-between;} #section02 .section-wrap > .bd .slide-container .item > .hd > .category {display: block; position: relative; padding-left: 1rem; line-height: 1; color: var(--color-blue-30);} #section02 .section-wrap > .bd .slide-container .item > .hd > .category::before {content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 1.4rem; background-color: var(--color-blue-50);} #section02 .section-wrap > .bd .slide-container .item > .hd > .date {display: block; line-height: 1; color: #999999;} #section02 .section-wrap > .bd .slide-container .item > .tit {display: block; overflow: hidden; height: 1em; line-height: 1; font-weight: 600; font-size: 1.8rem; color: #dddddd; white-space: nowrap; text-overflow: ellipsis;} #section02 .section-wrap > .bd .slide-ctrl {display: flex; margin-top: 6rem; padding-right: calc(100% - 1440px); align-items: center;} #section02 .section-wrap > .bd .slide-ctrl .progress {display: block; position: relative; overflow: hidden; height: 3px; margin-right: 4.2rem; border-radius: 99px; background-color: #555555;} #section02 .section-wrap > .bd .slide-ctrl .progress .fill {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; transform-origin: left top;} #section02 .section-wrap > .bd .slide-ctrl .btn-ctrl {display: block; width: 2.3rem; height: 2.3rem; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0;} #section02 .section-wrap > .bd .slide-ctrl .btn-ctrl + .btn-ctrl {margin-left: 2.4rem;} /*------------------------------------------------------------------- @variation -------------------------------------------------------------------*/ /* video */ #section02 .section-wrap > .bd .slide-container .item[data-s-type="video"] > .img-box::after {content:""; position: absolute; top: calc(50% - 3.5rem); left: calc(50% - 3.5rem); width: 7rem; height: 7rem; border-radius: 2rem; background: url(../../../images/site/kor/common/i_video_play.png) rgba(33,70,105,0.8) no-repeat center;} #section02 .section-wrap > .bd .slide-ctrl .btn-ctrl {outline-width: 0.1rem;} #section02 .section-wrap > .bd .slide-ctrl .btn-ctrl.btn-prev {background-image: url(../../../images/site/kor/common/i_arr2_prev_white.svg);} #section02 .section-wrap > .bd .slide-ctrl .btn-ctrl.btn-next {background-image: url(../../../images/site/kor/common/i_arr2_next_white.svg);} #section02 .section-wrap > .bd .slide-ctrl .btn-ctrl.btn-prev:focus-visible, #section02 .section-wrap > .bd .slide-ctrl .btn-ctrl.btn-prev:hover {background-image: url(../../../images/site/kor/common/i_arr2_prev_blue30.svg);} #section02 .section-wrap > .bd .slide-ctrl .btn-ctrl.btn-next:focus-visible, #section02 .section-wrap > .bd .slide-ctrl .btn-ctrl.btn-next:hover {background-image: url(../../../images/site/kor/common/i_arr2_next_blue30.svg);} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #section02 .section-wrap > .hd, #section02 .section-wrap > .bd {opacity: 0; transition: opacity 0.4s; transition-delay: 0s;} #section02.finded .section-wrap > .hd {opacity: 1; animation: upOnlyAni 0.4s forwards;} #section02.finded .section-wrap > .bd {opacity: 1; transition-delay: 0.1s; animation: upOnlyAni 0.4s 0.1s forwards;} #section02 .section-wrap > .bd .slide-container .item > .img-box > img {transition: transform 0.4s;} #section02 .section-wrap > .bd .slide-container .item:focus-visible > .img-box > img, #section02 .section-wrap > .bd .slide-container .item:hover > .img-box > img {transform: scale(1.1);} #section02 .section-wrap > .bd .slide-container .item[data-s-type="video"] > .img-box::after {transition: background 0.4s;} #section02 .section-wrap > .bd .slide-container .item[data-s-type="video"]:focus-visible > .img-box::after, #section02 .section-wrap > .bd .slide-container .item[data-s-type="video"]:hover > .img-box::after {background-color: var(--color-blue-50);} #section02 .section-wrap > .bd .slide-container .item > .tit {transition: color 0.4s;} #section02 .section-wrap > .bd .slide-container .item:focus-visible > .tit, #section02 .section-wrap > .bd .slide-container .item:hover > .tit {color: #fff; text-decoration: underline;} #section02 .section-wrap > .bd .slide-container .item > .hd > .date {transition: color 0.4s;} #section02 .section-wrap > .bd .slide-container .item:focus-visible > .hd > .date, #section02 .section-wrap > .bd .slide-container .item:hover > .hd > .date {color: #ddd;} #section02 .section-wrap > .bd .slide-container .item:focus-visible > .img-box {z-index: -1;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1480px) { #section02 {padding-left: 2rem;} #section02::before {display: none;} #section02 .section-wrap > .hd {max-width: none; padding-right: 2rem;} #section02 .section-wrap > .bd .slide-ctrl {padding-right: 2rem;} } @media screen and (max-width: 1024px) { #section02 {padding: 8rem 0 8rem 2rem;} #section02 .section-wrap > .hd {display: block;} #section02 .section-wrap > .hd > h2 {margin-bottom: 3.2rem; font-size: 3.4rem;} #section02 .section-wrap > .bd {margin-top: 3.2rem;} #section02 .section-wrap > .bd .slide-container .item > .tit {font-size: 1.7rem;} } @media screen and (max-width: 768px) { #section02 .section-wrap > .bd .slide-container {margin-right: 0;} #section02 .section-wrap > .bd .tab-con {padding-right: 2rem;} #section02 .section-wrap > .bd .slide-ctrl {margin-top: 3.2rem;} } @media screen and (max-width: 600px) { #section02 {padding: 6rem 0 6rem 2rem;} #section02 .section-wrap > .hd > h2 {font-size: 3.2rem;} #section02 .section-wrap > .bd .slide-container .item > .tit {font-size: 1.6rem;} #section02 .section-wrap > .hd > h2{margin-bottom: 2.4rem;} #section02 .section-wrap > .bd{margin-top: 2.4rem;} #section02 .section-wrap > .bd .slide-container .item > .img-box{margin-bottom: 2rem;} #section02 .section-wrap > .bd .slide-container .item > .hd{margin-bottom: 1.4rem;} #section02 .section-wrap > .bd .slide-ctrl{margin-top: 2rem;} } @media screen and (max-width: 425px) { #section02 .section-wrap > .bd .tab-con {padding-right: 0;} #section02 .section-wrap > .bd .slide-container {margin-right: -10rem;} } /*------------------------------------------------------------------- 분류이름 : section03 분류그룹 : 메인 섹션 -------------------------------------------------------------------*/ #section03 {display: block; overflow: hidden; position: relative;} #section03 .scene-wrap {display: block; position: relative; height: 100vh;} #section03 .scene-box {display: block; position: relative; height: 100vh;} #section03 .scene-box .inner {display: flex; position: relative; max-width: 1440px; height: 100%; margin: 0 auto; flex-direction: column;} #section03 .scene-box .inner > h2 {display: block; position: relative; z-index: 3; padding-top: 14rem; line-height: 1; font-weight: 800; font-size: 3.4rem; color: #fff;} /* 슬라이드 */ #section03 .scene-box .slide-area {display: block; position: relative; z-index: 2; width: 58rem; margin: auto 0 0 auto; padding-top: 7.5rem; padding-bottom: 17.5vh; visibility: visible !important;} #section03 .scene-box .slide-container {display: block; position: relative; overflow: hidden; background-color: rgba(0,0,0,0.5);} #section03 .scene-box .slide-container .swiper-slide {display: block; height: auto; position: relative; padding: 4.6rem 5rem 4rem; color: #ccc;} #section03 .scene-box .slide-container .swiper-slide .title {display: flex; margin-bottom: 3.2rem; line-height: 1; font-size: 2.1rem; align-items: flex-end;} #section03 .scene-box .slide-container .swiper-slide .title > em {display: block; font-weight: 700; font-size: 2.6rem; color: #fff;} #section03 .scene-box .slide-container .swiper-slide .title > span {margin-left: 0.8rem;} #section03 .scene-box .slide-container .swiper-slide .txt {display: block; /*height: calc(1.2em * 6);*/ line-height: 1.2; font-size: 1.6rem; /*display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 6;*/} #section03 .scene-box .slide-container .swiper-slide .btn-more {display: inline-flex; margin-top: 1rem; line-height: 2rem; color: var(--color-blue-30); align-items: center;} #section03 .scene-box .slide-container .swiper-slide .btn-more::after {content:""; display: block; width: 2rem; height: 2rem; margin-left: 1.6rem; background: url(../../../images/site/kor/main/i_more_arr.png) no-repeat center / contain;} #section03 .scene-box .slide-ctrl {position: absolute; top: 0; right: 0;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #section03 .scene-box .inner > h2 {opacity: 0; transition: opacity 0.8s;} #section03.finded .scene-box .inner > h2 {opacity: 1; animation: leftOnlyAni 0.8s forwards;} #rndSlideArea {transition: transform 0.2 ease-out;} #section03 .scene-box .slide-container::before, #section03 .scene-box .slide-container::after {content: ""; position: absolute; width: 2rem; height: 2rem; border-style: solid; border-color: var(--color-blue-30);} #section03 .scene-box .slide-container::before {top: 0; left: 0; border-width: 1px 0 0 1px;} #section03 .scene-box .slide-container::after {bottom: 0; right: 0; border-width: 0 1px 1px 0;} #section03 .scene-box .slide-container .swiper-slide::before, #section03 .scene-box .slide-container .swiper-slide::after {content: ""; position: absolute; width: 2rem; height: 2rem; border-style: solid; border-color: var(--color-blue-30);} #section03 .scene-box .slide-container .swiper-slide::before {top: 0; right: 0; border-width: 1px 1px 0 0;} #section03 .scene-box .slide-container .swiper-slide::after {bottom: 0; left: 0; border-width: 0 0 1px 1px;} #section03 .scene-box .slide-container .swiper-slide .btn-more:focus-visible {outline-offset: 0;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (min-width: 769px) { #section03 .scene-box .slide-container .swiper-slide .btn-more{opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0;} } @media screen and (max-width: 1480px) { #section03 .scene-box .inner {max-width: 1480px; padding: 0 2rem;} #section03 .scene-box .slide-area {padding-top: 6rem; padding-bottom: 10rem;} } @media screen and (max-width: 1024px) { #section03 .scene-box .inner > h2 {padding-top: 12rem;} #section03 .scene-box .slide-area {width: 52rem;} #section03 .scene-box .slide-container .swiper-slide {padding: 3.2rem 4.2rem 4rem;} } @media screen and (max-width: 768px) { #section03 .scene-box .slide-area {width: 43.8rem; padding-top: 0; padding-bottom: 5.4rem;} #section03 .scene-box .slide-container .swiper-slide .title {margin-bottom: 0;} #section03 .scene-box .slide-container .swiper-slide .txt {display: none;} #section03 .scene-box .slide-container .swiper-slide .btn-more {margin-top: 4.8rem;} #section03 .scene-box .slide-ctrl {top: auto; bottom: calc(5.4rem + 4rem - 0.6rem); right: 4.2rem;} } @media screen and (max-width: 600px) { #section03 .scene-wrap{height: 660px;} #section03 .scene-box{height: 100%;} #section03 .scene-box .inner > h2{padding-top: 3rem;} #section03 .scene-box .slide-area {width: 100%; padding-bottom: 2.4rem;} #section03 .scene-box .slide-container .swiper-slide {height: auto; padding: 3.2rem;} #section03 .scene-box .slide-container .swiper-slide .btn-more {margin-top: 4.2rem;} #section03 .scene-box .slide-ctrl {bottom: calc(2.4rem + 3.2rem - 0.2rem); right: 3.2rem;} } /*------------------------------------------------------------------- 분류이름 : 애니메이션 오브젝트 분류그룹 : 메인 섹션 > section03 -------------------------------------------------------------------*/ #section03 #rndBg {position: absolute; top: 0; right: 0; width: 100%; height: 100%;} #section03 #rndBg .bg {position: absolute; bottom: -2rem; right: 0; width: 80%; background-repeat: no-repeat; background-position: center; background-size: contain;} #section03 #rndBg .bg::before {content:""; display: block;} #section03 #rndObjects {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%;} #section03 #rndObjects .obj {position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain;} #section03 #rndObjects .obj{opacity: 0;} #section03.finded #rndObjects .obj{opacity: 1;} #section03 #rndObjects .obj::before {content:""; display: block;} /*------------------------------------------------------------------- @variation -------------------------------------------------------------------*/ /* 오브젝트 */ #section03 #rndObjects .obj[data-ani-obj="0"] {top: 24.338%; left: 14.895%; width: 52.708%; max-width: 75.9rem; background-image: url(../../../images/site/kor/main/img_rnd_00.png);} #section03 #rndObjects .obj[data-ani-obj="0"]::before {padding-top: 55.599%;} #section03 #rndObjects .obj[data-ani-obj="1"] {top: 36.814%; left: 11.645%; width: 36.693%; max-width: 66.9rem; background-image: url(../../../images/site/kor/main/img_rnd_01.png);} #section03 #rndObjects .obj[data-ani-obj="1"]::before {padding-top: 81.976%;} #section03 #rndObjects .obj[data-ani-obj="1"]:after{content: ""; display: block; position: absolute; bottom: calc(100% + 1.7rem); right: -13%; width: 55%; max-width: 33.1rem; height: 0; padding-top: 24.717%; background: url(../../../images/site/kor/main/img_rnd_01_01.png) no-repeat center center / contain;} #section03 #rndObjects .obj[data-ani-obj="2"]{width: 100%; height: 100%; animation: none !important;} #section03 #rndObjects .obj[data-ani-obj="2"] .objs{position: absolute;background-repeat: no-repeat;background-position: bottom center;background-size: contain;} #section03 #rndObjects .obj[data-ani-obj="2"] .objs::before{content: ""; display: block;} #section03 #rndObjects .obj[data-ani-obj="2"] .objs:nth-child(1){ left: 50%; bottom: 0; width: 100%; max-width: 89.9rem; background-image: url(../../../images/site/kor/main/bg_rnd_02_03.jpg); transform: translate(-82%); } #section03 #rndObjects .obj[data-ani-obj="2"] .objs:nth-child(1)::before {padding-top: 90vh;} #section03 #rndObjects .obj[data-ani-obj="2"] .objs:nth-child(2){left: 0;bottom: 0;width: 15.75%;max-width: 30rem;background-image: url(../../../images/site/kor/main/bg_rnd_02_01.png);} #section03 #rndObjects .obj[data-ani-obj="2"] .objs:nth-child(2)::before {padding-top: 315%;} #section03 #rndObjects .obj[data-ani-obj="2"] .objs:nth-child(3){right: 0; bottom: 0; width: 15.75%; max-width: 30rem; background-image: url(../../../images/site/kor/main/bg_rnd_02_02.png);} #section03 #rndObjects .obj[data-ani-obj="2"] .objs:nth-child(3)::before {content: ""; display: block; padding-top: 315%} /*#section03 #rndObjects .obj[data-ani-obj="2"] {top: 20.634%; left: 17.55%; width: 39.027%; max-width: 56.2rem; background-image: url(../../../images/site/kor/main/img_rnd_02.png);} #section03 #rndObjects .obj[data-ani-obj="2"]::before {padding-top: 120.818%;}*/ #section03 #rndObjects .obj[data-ani-obj="3"] {top: 31.904%; left: 5.218%; width: 52.138%; max-width: 85.4rem; background-image: url(../../../images/site/kor/main/img_rnd_03.png);} #section03 #rndObjects .obj[data-ani-obj="3"]::before {padding-top: 42.421%;} #section03 #rndObjects .obj[data-ani-obj="3"]:after{content: ""; display: block; position: absolute; bottom: 80%; left: 75%; width: 78%; max-width: 67.1rem; height: 0; padding-top: 24.717%; background: url(../../../images/site/kor/main/img_rnd_03_01.png) no-repeat center center / contain;} #section03.ready:not([data-ani-state="start"]) #rndObjects [data-ani-obj="1"].active:after, #section03.ready:not([data-ani-state="start"]) #rndObjects [data-ani-obj="3"].active:after {animation: sc03MBg 8s infinite;} #section03 #rndObjects .obj[data-ani-obj="4"] {top: 26.031%; left: 12.604%; width: 43.75%; max-width: 56.7rem; background-image: url(../../../images/site/kor/main/img_rnd_04.png);} #section03 #rndObjects .obj[data-ani-obj="4"]::before {padding-top: 55.079%;} #section03 #rndObjects .obj[data-ani-obj="4"]::after {content: ""; display: block; position: absolute; top: calc(100% + 1.7rem); left: 0; width: 100%; height: 0; padding-top: 55.079%; background: url(../../../images/site/kor/main/img_rnd_04_03.png) no-repeat center center / contain;} /*#section03 #rndObjects .obj[data-ani-obj="5"] {top: 15.449%; left: 13.333%; width: 60.763%; max-width: 87.5rem; background-image: url(../../../images/site/kor/main/img_rnd_05.png);} #section03 #rndObjects .obj[data-ani-obj="5"]::before {padding-top: 52.342%;} #section03 #rndObjects .obj[data-ani-obj="6"] {top: 25.925%; left: 13.333%; width: 60.138%; max-width: 86.6rem; background-image: url(../../../images/site/kor/main/img_rnd_06.png);} #section03 #rndObjects .obj[data-ani-obj="6"]::before {padding-top: 49.422%;}*/ /* 배경 */ #section03 #rndBg .bg[data-ani-obj="0"] {max-width: 134.7rem;} #section03 #rndBg .bg[data-ani-obj="1"] {max-width: 105.1rem;} #section03 #rndBg .bg[data-ani-obj="2"] {max-width: 139.6rem;} #section03 #rndBg .bg[data-ani-obj="3"] {max-width: 100%; width: calc(100% + 4rem); right: -2rem; height: 100%; background-size: cover;} #section03 #rndBg .bg[data-ani-obj="4"] {max-width: 120rem;} #section03 #rndBg .bg[data-ani-obj="5"] {max-width: 192rem; width: 100%; right: auto; height: auto; left: 0; bottom: 0; transform: translate(0,0) !important; background-size: contain; background-position: bottom left;} /*#section03 #rndBg .bg[data-ani-obj="6"] {max-width: 100%; width: 100%; height: 100%; background-size: cover;}*/ /* 위성활용 배경 오브젝트 */ #section03 #rndBg .bg[data-ani-obj="4"] [class^="bg-obj"] {position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: center; background-size: contain;} #section03 #rndBg .bg[data-ani-obj="4"] [class^="bg-obj"]::before {content:""; display: block;} #section03 #rndBg .bg[data-ani-obj="4"] svg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #section03 #rndBg .bg[data-ani-obj="4"] .bg-obj1 {width: 6.666%; background-image: url(../../../images/site/kor/main/img_rnd_04_01.png);} #section03 #rndBg .bg[data-ani-obj="4"] .bg-obj1::before {padding-top: 88.75%;} #section03 #rndBg .bg[data-ani-obj="4"] .bg-obj2 {width: 5.75%; background-image: url(../../../images/site/kor/main/img_rnd_04_02.png);} #section03 #rndBg .bg[data-ani-obj="4"] .bg-obj2::before {padding-top: 100%;} /* 위성활용 배경 오브젝트 */ #section03 #rndBg .bg[data-ani-obj="5"] [class^="bg-obj"] {position: absolute; top: 0; left:0; background-repeat: no-repeat; background-position: center; background-size: contain; text-indent: -9999px;} #section03 #rndBg .bg[data-ani-obj="5"] [class^="bg-obj"]::before {content:""; display: block;} #section03 #rndBg .bg[data-ani-obj="5"] svg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj1 {width: 11.444%; background-image: url(../../../images/site/kor/main/img_rnd_05_01.png);} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj1::before {padding-top: 40.83%;} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj2 {z-index: 1; top: 23%; left: 20.87%; width: 7.612%; background-image: url(../../../images/site/kor/main/img_rnd_05_02.png);} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj2::before {padding-top: 22.76%;} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj3 {top: 3.2%; left: 17.1%; width: 15.8%; background-image: url(../../../images/site/kor/main/img_rnd_05_03.png);} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj3::before {padding-top: 116.25%;} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj4 {top: 3.7%; left: 30.45%; width: 10.8%; background-image: url(../../../images/site/kor/main/img_rnd_05_04.png);} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj4::before {padding-top: 172.03%;} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj5 {top: 17.8%; left: 38%; width: 22.638%; background-image: url(../../../images/site/kor/main/img_rnd_05_05.png);} #section03 #rndBg .bg[data-ani-obj="5"] .bg-obj5::before {padding-top: 60.42%;} /* 이미지 PC|MOBILE */ @media screen and (min-width: 601px) { #section03 #rndBg .bg[data-ani-obj="0"] {background-image: url(../../../images/site/kor/main/bg_rnd_00.jpg);} #section03 #rndBg .bg[data-ani-obj="1"] {background-image: url(../../../images/site/kor/main/bg_rnd_01.jpg);} #section03 #rndBg .bg[data-ani-obj="2"] {} #section03 #rndBg .bg[data-ani-obj="3"] {background-image: url(../../../images/site/kor/main/bg_rnd_03.jpg);} #section03 #rndBg .bg[data-ani-obj="4"] {background-image: url(../../../images/site/kor/main/bg_rnd_04.jpg);} #section03 #rndBg .bg[data-ani-obj="5"] {background-image: url(../../../images/site/kor/main/bg_rnd_05.jpg);} /*#section03 #rndBg .bg[data-ani-obj="6"] {background-image: url(../../../images/site/kor/main/bg_rnd_06.png);}*/ #section03 #rndBg .bg[data-ani-obj="0"]::before {padding-top: 65.701%;} #section03 #rndBg .bg[data-ani-obj="1"]::before {padding-top: 77.45%;} #section03 #rndBg .bg[data-ani-obj="2"]::before {padding-top: 63.037%;} #section03 #rndBg .bg[data-ani-obj="4"]::before {padding-top: 65%;} #section03 #rndBg .bg[data-ani-obj="5"]::before {padding-top: 37.113%;} } @media screen and (max-width: 600px) { #section03 #rndBg .bg[data-ani-obj="0"] {max-width: 100%; background-image: url(../../../images/site/kor/main/mobile/bg_rnd_00.png);} #section03 #rndBg .bg[data-ani-obj="1"] {max-width: 27rem; background-image: url(../../../images/site/kor/main/mobile/bg_rnd_01.png);} #section03 #rndBg .bg[data-ani-obj="2"] {max-width: 100%; background-size: auto 100%; background-position: left 80% bottom; background-image: url(../../../images/site/kor/main/mobile/bg_rnd_022.png);} #section03 #rndBg .bg[data-ani-obj="3"] {background-image: url(../../../images/site/kor/main/mobile/bg_rnd_03.png); background-size: auto 100%; background-position: bottom center;} #section03 #rndBg .bg[data-ani-obj="4"] {max-width: 33.5rem; background-image: url(../../../images/site/kor/main/mobile/bg_rnd_04.png);} #section03 #rndBg .bg[data-ani-obj="5"] {max-width: 100%; background-image: url(../../../images/site/kor/main/mobile/bg_rnd_05.png);} #section03 #rndBg .bg[data-ani-obj="5"] >*{display: none; } /*#section03 #rndBg .bg[data-ani-obj="6"] {background-image: url(../../../images/site/kor/main/mobile/bg_rnd_06.png); background-size: cover; background-position: center top;}*/ #section03 #rndBg .bg[data-ani-obj="0"]::before {padding-top: 122.051%;} #section03 #rndBg .bg[data-ani-obj="1"]::before {padding-top: 129.259%;} #section03 #rndBg .bg[data-ani-obj="2"]::before {padding-top: 58rem/* 88.108%*/;} #section03 #rndBg .bg[data-ani-obj="4"]::before {padding-top: 137.611%;} #section03 #rndBg .bg[data-ani-obj="5"]::before {padding-top: 179.844%;} } @media screen and (max-width: 480px) { #section03 #rndBg .bg[data-ani-obj="5"]{background-size: auto 50%;} } @media screen and (max-width: 400px) { #section03 #rndBg .bg[data-ani-obj="5"]{background-size: auto 60%;} } /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #section03 #rndObjects {transition: transform 0.2s ease-out;} /* 시작애니메이션 */ #section03.ready #section03 #rndObjects {transition: transform 0.8s ease;} #section03 #section03 #rndBg {opacity: 0; transition: transform 0.8s ease, opacity 0.8s;} #section03.finded #section03 #rndBg{opacity: 1;} /* 마우스 트랜지션 */ /* 슬라이드 트랜지션 */ #section03 [data-ani-obj] {visibility: hidden; opacity: 0; transition: visibility 0s 0.2s, opacity 0.2s;} #section03 [data-ani-obj].active {visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.2s;} /* 배경 슬라이드 애니메이션 */ #section03[data-ani-state="start"] #rndBg [data-ani-obj].active {animation: objAniBg 0.4s;} /* 요소 슬라이드 애니메이션 */ #section03[data-ani-state="start"] #rndObjects [data-ani-obj="0"].active {animation: objAniTopLeft 0.4s;} #section03[data-ani-state="start"] #rndObjects [data-ani-obj="1"].active {animation: objAniTopRight 0.4s;} #section03[data-ani-state="start"] #rndObjects [data-ani-obj="2"].active {animation: objAniBottomLeft 0.4s;} #section03[data-ani-state="start"] #rndObjects [data-ani-obj="3"].active {animation: objAniBottomRight 0.4s;} #section03[data-ani-state="start"] #rndObjects [data-ani-obj="4"].active {animation: objAniBottom 0.4s;} #section03[data-ani-state="start"] #rndObjects [data-ani-obj="5"].active {animation: objAniTopLeft 0.4s;} #section03[data-ani-state="start"] #rndObjects [data-ani-obj="6"].active {animation: objAniTopLeft 0.4s;} /* 위성활용 배경 오브젝트 */ #section03 #rndBg .bg[data-ani-obj="4"].active .bg-obj1 {opacity: 0; offset-path: url("#bg04Path01"); offset-rotate: 0deg; animation: objOffset 3.2s forwards;} #section03 #rndBg .bg[data-ani-obj="4"].active .bg-obj2 {opacity: 0; offset-path: url("#bg04Path02"); offset-rotate: 0deg; animation: objOffset 3.4s forwards;} #section03 #rndBg .bg[data-ani-obj="5"].active .bg-obj1 {opacity: 0; offset-path: url("#bg05Path01"); offset-rotate: 0deg; transform: translate(0,0); animation: objOffset2 10s forwards;} #section03 #rndBg .bg[data-ani-obj="5"].active .bg-obj3 {opacity: 0; transform: scale(0); transform-origin: bottom left; animation: objOffset3 10s forwards;} #section03 #rndBg .bg[data-ani-obj="5"].active .bg-obj4 {opacity: 0; transform: scale(0); transform-origin: top left; animation: objOffset4 10s forwards;} #section03 #rndBg .bg[data-ani-obj="5"].active .bg-obj5 {opacity: 0; transform: scale(0); transform-origin: bottom left; animation: objOffset5 10s forwards;} /* 발견 후 슬라이드 애니메이션 상태가 아닐 때 */ #section03.ready:not([data-ani-state="start"]) #rndObjects [data-ani-obj].active {animation: sc03MObj 22s infinite;} /* 키프레임 */ @keyframes objAniTopLeft { 0% {transform: translate(-25%, -25%); opacity: 0;} 100% {transform: translate(0, 0); opacity: 1;} } @keyframes objAniTopRight { 0% {transform: translate(25%, -25%); opacity: 0;} 100% {transform: translate(0, 0); opacity: 1;} } @keyframes objAniBottom { 0% {transform: translateY(25%); opacity: 0;} 100% {transform: translateY(0); opacity: 1;} } @keyframes objAniBottomLeft { 0% {transform: translate(-25%, 25%); opacity: 0;} 100% {transform: translate(0, 0); opacity: 1;} } @keyframes objAniBottomRight { 0% {transform: translate(25%, 25%); opacity: 0;} 100% {transform: translate(0, 0); opacity: 1;} } @keyframes objAniBg { 0% {transform: translate(30px, 30px); opacity: 0;} 100% {transform: translate(0, 0); opacity: 1;} } @keyframes objOffset { 0% {offset-distance: 0%; opacity: 0;} 100% {offset-distance: 100%; opacity: 1;} } @keyframes objOffset2 { 0% {offset-distance: 0%; opacity: 0;} 20%,21% {offset-distance: 36%; opacity: 1;} 35%,36%{ offset-distance: 68%; opacity: 1;} 50%,100% {offset-distance: 100%; opacity: 1;} } @keyframes objOffset3 { 16% {opacity: 0; transform: scale(0);} 17% {opacity: 1; transform: scale(1);} 20%,100% {opacity: 0;} } @keyframes objOffset4 { 17% {opacity: 0; transform: scale(0);} 18% {opacity: 1; transform: scale(1);} 23%,100% {opacity: 0;} } @keyframes objOffset5 { 30% {opacity: 0; transform: scale(0);} 31% {opacity: 1; transform: scale(1);} 35%,100% {opacity: 0;} } /* mobile animation */ @keyframes sc03MBg { 0% {transform: translate(0, 0);} 25% {transform: translate(7.5px, -5px);} 50% {transform: translate(-5px, 10px);} 75% {transform: translate(5px, -7.5px);} 100% {transform: translate(0, 0);} } @keyframes sc03MObj { 0% {transform: translate(0, 0);} 25% {transform: translate(4%, -3%);} 50% {transform: translate(-2%, 4%);} 75% {transform: translate(3%, -2%);} 100% {transform: translate(0, 0);} } /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ /* wide monitor */ @media screen and (min-width: 1921px) { /* 오브젝트 */ /* #section03 #rndObjects .obj[data-ani-obj="0"] {width: 39.531%;} #section03 #rndObjects .obj[data-ani-obj="1"] {width: 48.593%;} #section03 #rndObjects .obj[data-ani-obj="2"] {width: 29.27%;} #section03 #rndObjects .obj[data-ani-obj="3"] {width: 56.354%;} #section03 #rndObjects .obj[data-ani-obj="4"] {width: 32.812%;} #section03 #rndObjects .obj[data-ani-obj="5"] {width: 45.572%;} */ /* 배경 */ #section03 #rndBg .bg[data-ani-obj="0"] {max-width: none; width: 70.156vw;} #section03 #rndBg .bg[data-ani-obj="1"] {max-width: none; width: 54.739vw;} #section03 #rndBg .bg[data-ani-obj="2"] {max-width: none; width: 72.708vw;} #section03 #rndBg .bg[data-ani-obj="4"] {max-width: none; width: 62.5vw;} #section03 #rndBg .bg[data-ani-obj="5"] {max-width: none; width: 60.57vw;} } @media screen and (max-width: 1480px) { #section03 #rndObjects .obj[data-ani-obj="0"] {left: 4.5%;} #section03 #rndObjects .obj[data-ani-obj="1"] {left: 2.916%;} #section03 #rndObjects .obj[data-ani-obj="2"] {/* left: 8.125%; */} #section03 #rndObjects .obj[data-ani-obj="3"] {left: 0;} #section03 #rndObjects .obj[data-ani-obj="4"] {left: 2rem;} #section03 #rndObjects .obj[data-ani-obj="5"] {left: 2.5%;} #section03 #rndObjects .obj[data-ani-obj="6"] {left: 1%;} #section03 #rndBg .bg[data-ani-obj="2"] {width: 100%;} #section03 #rndObjects .obj[data-ani-obj="2"] .objs:nth-child(2){display:none;} } @media screen and (max-width: 1024px) { #section03 #rndBg .bg[data-ani-obj="0"] {width: 100%;} #section03 #rndBg .bg[data-ani-obj="4"] {width: 100%;} } @media screen and (max-width: 768px) { /* 오브젝트 */ #section03 #rndObjects .obj[data-ani-obj="0"] {top: auto; bottom: 40%; width: 63.9%;} #section03 #rndObjects .obj[data-ani-obj="1"] {top: auto; bottom: 35%;} #section03 #rndObjects .obj[data-ani-obj="2"] {top: auto; bottom: 0; left: 0; width: 100%;} #section03 #rndObjects .obj[data-ani-obj="3"] {top: auto; bottom: 42%;} #section03 #rndObjects .obj[data-ani-obj="4"] {top: auto; bottom: 56%; width: 53%;} #section03 #rndObjects .obj[data-ani-obj="5"] {top: auto; bottom: 43%;} #section03 #rndObjects .obj[data-ani-obj="6"] {top: auto; bottom: 35%;} /* 배경 */ #section03 #rndBg .bg[data-ani-obj="0"] {right: -20%; width: 135%;} #section03 #rndBg .bg[data-ani-obj="1"] {width: 100%;} #section03 #rndBg .bg[data-ani-obj="2"] {right: -10%; width: 110%;} #section03 #rndBg .bg[data-ani-obj="4"] {right: -20%; width: 120%;} #section03 #rndBg .bg[data-ani-obj="5"] {right: -12%; width: 100%;} } @media screen and (max-width: 600px) { /* 오브젝트 */ #section03 #rndObjects .obj[data-ani-obj="0"] {bottom: calc(17.6rem + 22%); width: 82.564%;} #section03 #rndObjects .obj[data-ani-obj="1"] {bottom: calc(13.6rem + 10.344%); left: 2rem; width: 70.948%;} #section03 #rndObjects .obj[data-ani-obj="2"] {display: none; } #section03 #rndObjects .obj[data-ani-obj="3"] {bottom: calc(17.6rem + 12.398%/*2.398%*/); left: 0; width: 89.487%;} #section03 #rndObjects .obj[data-ani-obj="3"]:after{bottom: 106%;left: 20%;} #section03 #rndObjects .obj[data-ani-obj="4"] {bottom: calc( 17.6rem + 17.6rem + 3.74%); width: 63.589%;} #section03 #rndObjects .obj[data-ani-obj="5"] {bottom: calc(17.6rem + 16%); width: 82.307%;} #section03 #rndObjects .obj[data-ani-obj="6"] {bottom: calc(17.6rem + 16%); width: 82.307%;} /* 배경 */ #section03 #section03 #rndBg {transform: none !important;} #section03 #rndBg .bg[data-ani-obj="0"], #section03 #rndBg .bg[data-ani-obj="1"], #section03 #rndBg .bg[data-ani-obj="2"], #section03 #rndBg .bg[data-ani-obj="3"], #section03 #rndBg .bg[data-ani-obj="4"], #section03 #rndBg .bg[data-ani-obj="5"] {right: 0; width: 100%;} #section03 #rndBg .bg[data-ani-obj="4"] [class^="bg-obj"] {display: none;} #section03.ready:not([data-ani-state="start"]) #section03 #rndBg [data-ani-obj].active {animation: sc03MBg 25s infinite;} } /*------------------------------------------------------------------- 분류이름 : section04 분류그룹 : 메인 섹션 -------------------------------------------------------------------*/ #section04 {display: block; position: relative; background: url(../../../images/site/kor/main/bg_section04.jpg) no-repeat left center / cover;} #section04 > .inner {display: block; position: relative; max-width: 1440px; margin: 0 auto; padding: 6.6rem 0 9.4rem;} #section04 > .inner::after {content:""; position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain;} #section04 .section-wrap {display: block; z-index: 1; color: #ccc;} #section04 .section-wrap > h2 {display: block; margin-bottom: 2rem; line-height: 1; font-weight: 800; font-size: 3.4rem; color: #fff;} #section04 .section-wrap .txt {display: block;} #section04 .section-wrap .btn-outline-more {margin-top: 2.6rem;} /*------------------------------------------------------------------- @variation -------------------------------------------------------------------*/ /* object */ #section04 > .inner::before {content: ""; display: block; position: absolute; bottom: 1.5rem; right: 29.652%; width: 22.5rem; height: 27.1rem; background-image: url(../../../images/site/kor/main/img_section04_01.png); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;} #section04 > .inner::after {content: ""; display: block; position: absolute; top: calc(50% - 7.5rem); right: 14%; width: 21.1rem; height: 15.1rem; background-image: url(../../../images/site/kor/main/img_section04_02.png); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;} #section04 .section-wrap:before{content: ""; display: block; position: absolute; bottom: 4rem; right: -12%; width: 42.3rem; height: 19.9rem; background-image: url(../../../images/site/kor/main/img_section04_03.png); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #section04 .section-wrap > h2, #section04 .section-wrap .txt, #section04 .section-wrap .btn-outline-more {opacity: 0; transition: opacity 0.4s; transition-delay: 0s;} #section04.finded .section-wrap > h2 {opacity: 1; animation: upOnlyAni 0.4s forwards;} #section04.finded .section-wrap .txt {opacity: 1; transition-delay: 0.1s; animation: upOnlyAni 0.4s 0.1s forwards;} #section04.finded .section-wrap .btn-outline-more {opacity: 1; transition: opacity 0.4s 0.2s, border 0.3s, background 0.3s, color 0.3s; animation: upOnlyAni 0.4s 0.15s forwards;} #section04 > .inner::before, #section04 > .inner::after, #section04 .section-wrap:before{opacity: 0; transition: opacity 0.4s; transition-delay: 0s;} #section04.finded > .inner::before{opacity: 1; animation: sc04Obj1 1s forwards;} #section04.finded > .inner::after {opacity: 1; transition-delay: 0.3s; animation: sc04Obj2 0.7s 0.3s forwards;} #section04.finded .section-wrap:before{opacity: 1; transition-delay: 0.6s; animation: sc04Obj1 0.7s 0.6s forwards;} @keyframes sc04Obj1 { 0% {transform: translate(-4rem, 4rem);} 100% {transform: translate(0, 0);} } @keyframes sc04Obj2 { 0% {transform: translate(4rem, -4rem);} 100% {transform: translate(0, 0);} } /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1480px) { #section04 > .inner {max-width: none; padding: 6.6rem 2rem 9.4rem} #section04 > .inner::before {top: calc(50% - 10.7rem); right: 34%; width: 17.8rem; height: 21.4rem;} #section04 > .inner::after {top: calc(50% - 6rem); right: 22%; width: 16.8rem; height: 12rem;} #section04 .section-wrap:before{bottom: auto; top: 50%; right: 2rem; width: calc(42.3rem * 0.8); height: calc(19.9rem * 0.8); margin-top: calc((19.9rem * 0.8) * -0.5);} #section04 .section-wrap {max-width: 50%;} } @media screen and (max-width: 1200px) { #section04 > .inner::before {top: calc(50% - 10.7rem); right: 34%; width: calc(17.8rem * 0.9); height: calc(21.4rem * 0.9);} #section04 > .inner::after {top: calc(50% - 6rem); right: 22%; width: calc(16.8rem * 0.9); height: calc(12rem * 0.9);} #section04 .section-wrap:before{bottom: auto; top: 50%; right: 2rem; width: calc(42.3rem * 0.7); height: calc(19.9rem * 0.7); margin-top: calc((19.9rem * 0.7) * -0.5);} } @media screen and (max-width: 1024px) { #section04 > .inner {padding: 6.4rem 2rem;} #section04 > .inner::before {right: 20rem;} #section04 > .inner::after {right: 2rem;} #section04 > .inner::before, #section04 > .inner::after, #section04 .section-wrap:before{display: none;} #section04 .section-wrap {min-width: 100%;} } @media screen and (max-width: 600px) { #section04 {background-image: url(../../../images/site/kor/main/bg_section04_mobile.jpg);} #section04 > .inner {height: auto; min-height: auto; padding: 4rem 2rem;} #section04 > .inner::before {display: none; top: 10rem; right: 4.7rem; width: 24.9rem; min-width: 24.9rem; height: 26.6rem; min-height: 26.6rem;} #section04 > .inner::after {display: none; top: calc(50% - 3rem); right: 12%;} #section04 .section-wrap {max-width: 100%; min-width: 0;} #section04 .section-wrap > h2 {margin-bottom: 1.6rem; font-size: 3.2rem;} #section04 .section-wrap .btn-outline-more{margin-top: 2.4rem;} } /*------------------------------------------------------------------- 분류이름 : section05 분류그룹 : 메인 섹션 -------------------------------------------------------------------*/ #section05 {display: block; background-color: #161616;} #section05 .section-wrap {display: block; max-width: 1440px; margin: 0 auto; padding: 10rem 0;} #section05 .section-wrap > .hd {display: flex; justify-content: space-between;} #section05 .section-wrap > .hd > h2 {display: block; margin-right: auto; line-height: 1; font-weight: 900; font-size: 4rem; color: #fff;} #section05 .section-wrap > .hd > .hrzn-scroll-box {margin-right: -0.6rem;} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab {display: flex; height: 4rem; padding-bottom: 1rem; align-items: center;} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab::before {content: ""; display: block; width: 3rem; height: 3rem; margin-right: 0.8rem; background-repeat: no-repeat; background-position: center center; background-size: 2.4rem; flex-shrink: 0;} #section05 .section-wrap > .hd .bod-tab-head > li:first-child .btn-toggle-tab::before {display: none;} #section05 .section-wrap > .bd {display: block; margin-top: 5rem;} #section05 .section-wrap > .bd .list {display: flex; gap: 4rem;} #section05 .section-wrap > .bd .list > li {display: block; width: calc(25% - (4rem * 3 / 4));} #section05 .section-wrap > .bd .list > li .item {display: block; padding-bottom: 3rem; border-bottom: 1px solid #444444;} #section05 .section-wrap > .bd .list > li .item > .category {display: flex; position: relative; height: 3rem; margin-bottom: 1.6rem; padding-left: 4rem; line-height: 1; font-weight: 500; color: var(--color-blue-30); align-items: center;} #section05 .section-wrap > .bd .list > li .item > .category::before {content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 3rem; background-repeat: no-repeat; background-position: center; background-size: contain;} #section05 .section-wrap > .bd .list > li .item > .tit {display: block; overflow: hidden; height: calc(1.4em * 2); margin-bottom: 1.4rem; line-height: 1.4; font-weight: 600; font-size: 1.8rem; color: #dddddd; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} #section05 .section-wrap > .bd .list > li .item > .img-box {display: flex; overflow: hidden; position: relative;} #section05 .section-wrap > .bd .list > li .item > .img-box .img {display: block; overflow: hidden; position: relative; height: 17rem; border-radius: 0.4rem;} #section05 .section-wrap > .bd .list > li .item > .img-box .img > img {display: inline-block; max-width: 100%; width: auto; height: 100%; border-radius: 0.4rem; object-fit: cover;} /*------------------------------------------------------------------- @variation -------------------------------------------------------------------*/ #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab[data-s-type="youtube"]::before {background-image: url(../../../images/site/kor/common/i_sns_youtube.svg);} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab[data-s-type="instagram"]::before {background-image: url(../../../images/site/kor/common/i_sns_instagram.svg);} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab[data-s-type="facebook"]::before {background-image: url(../../../images/site/kor/common/i_sns_facebook.svg);} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab[data-s-type="blog"]::before {background-image: url(../../../images/site/kor/common/i_sns_blog.svg);} #section05 .section-wrap > .bd .list > li .item[data-s-type="youtube"] > .category {color: #fe908a;} #section05 .section-wrap > .bd .list > li .item[data-s-type="instagram"] > .category {color: #ff64bf;} #section05 .section-wrap > .bd .list > li .item[data-s-type="facebook"] > .category {color: var(--color-blue-30);} #section05 .section-wrap > .bd .list > li .item[data-s-type="blog"] > .category {color: #6ddb3e;} #section05 .section-wrap > .bd .list > li .item[data-s-type="youtube"] > .category::before {background-image: url(../../../images/site/kor/main/i_sns_youtube.png);} #section05 .section-wrap > .bd .list > li .item[data-s-type="instagram"] > .category::before {background-image: url(../../../images/site/kor/main/i_sns_instagram.png);} #section05 .section-wrap > .bd .list > li .item[data-s-type="facebook"] > .category::before {background-image: url(../../../images/site/kor/main/i_sns_facebook.png);} #section05 .section-wrap > .bd .list > li .item[data-s-type="blog"] > .category::before {background-image: url(../../../images/site/kor/main/i_sns_blog.png);} /* mouse hover */ #section05 .section-wrap > .bd .list > li .item > .tit {transition: color 0.3s;} #section05 .section-wrap > .bd .list > li .item:focus-visible > .tit, #section05 .section-wrap > .bd .list > li .item:hover > .tit {color: #fff; text-decoration: underline;} #section05 .section-wrap > .bd .list > li .item:focus-visible > .img-box {z-index: -1;} #section05 .section-wrap > .bd .list > li .item > .img-box .img > img {transition: transform 0.4s;} #section05 .section-wrap > .bd .list > li .item:focus-visible > .img-box .img > img, #section05 .section-wrap > .bd .list > li .item:hover > .img-box .img > img {transform: scale(1.1);} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #section05 .section-wrap > .hd, #section05 .section-wrap > .bd {opacity: 0; transition: opacity 0.4s; transition-delay: 0s;} #section05.finded .section-wrap > .hd {opacity: 1; animation: upOnlyAni 0.4s forwards;} #section05.finded .section-wrap > .bd {opacity: 1; transition-delay: 0.1s; animation: upOnlyAni 0.4s 0.1s forwards;} /*#section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab::before {transition: background 0.3s;} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab[data-s-type="youtube"].active::before {background-image: url(../../../images/site/kor/main/i_sns_youtube.png);} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab[data-s-type="instagram"].active::before {background-image: url(../../../images/site/kor/main/i_sns_instagram.png);} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab[data-s-type="facebook"].active::before {background-image: url(../../../images/site/kor/main/i_sns_facebook.png);} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab[data-s-type="blog"].active::before {background-image: url(../../../images/site/kor/main/i_sns_blog.png);}*/ /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media screen and (max-width: 1480px) { #section05 .section-wrap {max-width: none; padding: 8rem 2rem 10rem;} #section05 .section-wrap > .bd .list {gap: 2rem;} #section05 .section-wrap > .bd .list > li {width: calc(25% - (2rem * 3 / 4));} #section05 .section-wrap > .bd .list > li .item {padding-bottom: 2rem;} } @media screen and (max-width: 1024px) { #section05 .section-wrap > .hd {display: block;} #section05 .section-wrap > .hd > h2 {margin-bottom: 3.2rem; font-size: 3.4rem;} #section05 .section-wrap > .hd .bod-tab-head {gap: 2rem;} #section05 .section-wrap > .bd{margin-top: 3.2rem;} #section05 .section-wrap > .bd .list > li .item > .tit {font-size: 1.7rem;} #section05 .section-wrap > .bd .list > li .item > .img-box .img {height: 10rem;} } @media screen and (max-width: 768px) { #section05 .section-wrap > .hd .bod-tab-head {gap: 1rem;} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab {height: auto; padding: 0.8rem 0.4rem;} #section05 .section-wrap > .bd .list {flex-wrap: wrap;} #section05 .section-wrap > .bd .list > li {width: calc(50% - 1rem);} #section05 .section-wrap > .bd .list > li .item > .tit {font-size: 1.6rem;} } @media screen and (max-width: 600px) { #section05 .section-wrap {padding: 6.4rem 2rem 8rem;} #section05 .section-wrap > .hd .bod-tab-head {gap: 0.6rem;} #section05 .section-wrap > .hd .bod-tab-head > li .btn-toggle-tab::before {display: none;} #section05 .section-wrap > .bd .list > li {width: 100%;} #section05 .section-wrap > .bd .list > li:nth-child(n+3) {/*display: none;*/} #section01 #newsRoom > .bd .list > li .item > .con {min-height: 0; margin-bottom: 1rem;} #section05 .section-wrap > .bd .list > li .item{display: flex; flex-wrap: wrap;} #section05 .section-wrap > .bd .list > li .item > .category {width: 100%;height: 2.4rem;margin-bottom: 1rem;padding-left: 3.2rem;font-size: 1.5rem;order: 1;} #section05 .section-wrap > .bd .list > li .item > .category::before {width: 2.4rem; height: 2.4rem;} #section05 .section-wrap > .bd .list > li .item > .img-box .img {width: 12rem;height: 9rem;text-align: center;background-color: #222222;} #section05 .section-wrap > .bd .list > li .item > .img-box .img img{border-radius: 0;} #section05 .section-wrap > .bd .list > li .item > .tit {font-size: 1.6rem;} #section05 .section-wrap > .bd .list > li .item > .tit{width: calc(100% - 12rem - 2rem);height: auto;max-height: calc(1.4em * 3);order: 3;margin-left: 2rem;-webkit-line-clamp: 3;} #section05 .section-wrap > .bd .list > li .item > .img-box{order: 2;} #section05 .section-wrap > .hd > h2{margin-bottom: 2.4rem;} #section05 .section-wrap > .bd{margin-top: 2.4rem;} } @media screen and (max-width: 375px) { #section05 .section-wrap > .bd .list > li .item > .tit {font-size: 1.4rem;} } #ready_page{text-align: center; width: 100%;} #ready_page:before{content: "";display: block;width: 13.7rem;height: 14rem;margin: 0 auto;background: url(../../../images/site/kor/sub/ready_page02.svg) no-repeat center center / 100% auto;} #ready_page >strong{display: block;width: 100%;margin-top: 1.6rem;color: #fff;font-size: 2.2rem;font-weight: 800;letter-spacing: -0.026rem;} #ready_page >p{margin-top: 1.4rem; font-size: 1.8rem; color: #fff; letter-spacing: -0.018rem; line-height: 1.4;} @media screen and (max-width:1024px){ #ready_page:before{width: 10rem; height: 10rem;} #ready_page >strong{margin-top: 1.2rem; font-size: 2rem;} #ready_page >p{margin-top: 1rem; font-size: 1.5rem;} } @media screen and (max-width:640px){ #ready_page >strong{margin-top: 1rem; font-size: 1.8rem;} } [id*="layer_pop"] {position:absolute; left:50px; top:160px; max-width:500px; width:90%; z-index:499; display:none; box-shadow:5px 0px 10px rgba(0, 0, 0, 0.2);background-color:#082454;} #layer_pop2{left: 50px; top: 700px;} [id*="layer_pop"] #layer_pop1header, [id*="layer_pop"] #layer_pop2header{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; position: relative; top: auto; left: auto; max-width: none; width: 100%; z-index: auto; padding:10px; cursor: move; text-align:center; font-weight: 300; color:#fff; box-shadow: none;} [id*="layer_pop"] #layer_pop1header:before, [id*="layer_pop"] #layer_pop2header:before{content: ""; display: block; width: 2rem;height: 2rem; background: url(../../../images/site/kor/main/layerpop_img01.svg) no-repeat center center / 100% auto;} [id*="layer_pop"] .cont {width:100%; height:auto;} [id*="layer_pop"] .cont a {display:block; width:100%;} [id*="layer_pop"] .cont img {display:block; width:100%; max-width:100%} [id*="layer_pop"] .pop_ck {overflow:hidden; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding:10px 15px; background-color:#214687;} [id*="layer_pop"] .pop_ck span {display:inline-block; vertical-align:top; color: #fff; font-size: 1.6rem;} [id*="layer_pop"] .pop_ck span.pop_today{position: relative; padding-left: 3.2rem; font-weight: 300;} [id*="layer_pop"] .pop_ck span.pop_today input{position: absolute; top: 0.5rem; left: 0.4rem; width: 1.4rem; height: 1.4rem;} [id*="layer_pop"] .pop_ck span.pop_today label:before{content: ""; display: block; position: absolute; top: 0.1rem; left: 0; width: 2rem; height: 2rem; background-color: #fff; border-radius: 3px;} [id*="layer_pop"] .pop_ck span.pop_today label:after{ content: ""; opacity: 0; display: block; position: absolute; top: 0.1rem; left: 0; width: 2rem; height: 2rem; background: url(../../../images/site/kor/main/layerpop_img02.svg); border-radius: 3px; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } [id*="layer_pop"] .pop_ck span.pop_today input:checked + label:after{opacity: 1;} [id*="layer_pop"] .pop_ck span.close_pop {} @media (max-width: 1024px){ [id*="layer_pop"] {left:50px !important; top:120px !important;} [id*="layer_pop"] #layer_pop1header, [id*="layer_pop"] #layer_pop2header{display:none;} #layer_pop2{top:660px; left:50px;} } @media all and (max-width:640px){ [id*="layer_pop"]{left:50% !important; transform:translateX(-50%); width:300px;} [id*="layer_pop"] .pop_ck span.pop_today{font-size: 1.4rem; padding-left: 2.8rem;} [id*="layer_pop"] .pop_ck span{font-size: 1.4rem;} #layer_pop2{top:520px;} }