/*
Theme Name: the7dtchild
Author: Dream-Theme
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.1.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself. You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/
/* Cache cleared: 2025-11-08 */
/* ============================================
Global Font Family
============================================ */
body,
body *:not(#wpadminbar):not(#wpadminbar *):not(.elementor-panel):not(.elementor-panel *):not(.elementor-navigator):not(.elementor-navigator *):not(.mce-container *):not(.mce-toolbar *):not(.mce-ico):not(.mce-ico *):not(.note-toolbar *):not(.note-editor *) {
font-family: 'Urbanist', 'Malgun Gothic', sans-serif !important;
}
:root{
/* 컬러 */
--basic:rgba(17,17,17,0.75);
--LightFont:rgba(17,17,17,0.5);
--main:#152458;
--sub: #4B7DBC;
--sub2:#044691;
--white:#fff;
--black:#111111;
--grayBg:#F4F4F4;
--border:rgba(17,17,17,0.12);
--main-opa:rgba(21,36,88,0.6);
/* 폰트 */
--eng: 'Urbanist', Malgun Gothic,'Malgun Gothic', sans-serif;
--icon: "Material Symbols Outlined";
--borderR10:10px;
--borderR20:20px;
--borderR30:30px;
/* 높이 */
--vh: 100%;
}
.basic_in {
max-width: 1350px;
width: 90%;
margin: 0 auto;
}
/* comm_btn */
.comm_btn {
border:0;
border-radius:3px;
font-size: 1rem;
font-weight: 700;
line-height: 168.75%;
letter-spacing:0.32px;
cursor:pointer;
display:block;
transition:all .3s linear;
}
.comm_btn.main_btn {
background:var(--main);
color:var(--white);
}
.comm_btn.main_btn:hover {
background:var(--sub);
}
.comm_btn.white_btn {
background:var(--white);
color:var(--main);
border:1px solid var(--main);
}
.comm_btn.white_btn:hover {
color:var(--sub);
border-color:var(--sub);
}
/* ============================================
Collaverse History Section
============================================ */
.story_cont.collaverse-history {
--collaverse-history-height: min(100vh, 960px);
--collaverse-history-accent: #4b7dbc;
--collaverse-history-white: #ffffff;
--collaverse-history-line: rgba(255, 255, 255, 0.3);
--collaverse-arrow-length: 0px;
--collaverse-arrow-offset: calc(var(--collaverse-arrow-length) / 2);
position: relative;
color: var(--collaverse-history-white);
background-color: #05020f;
padding: 0;
overflow: hidden;
}
.story_cont.collaverse-history::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--collaverse-history-bg, url('/wp-content/uploads/2025/11/history_bg-scaled.jpg'));
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
z-index: 0;
pointer-events: none;
}
.story_cont.collaverse-history .basic_in {
width: min(1350px, 92vw);
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
.story_cont.collaverse-history .history {
position: relative;
z-index: 1;
padding-top: var(--collaverse-history-height);
}
.story_cont.collaverse-history .history .bg {
position: absolute;
inset: 0;
width: 100%;
min-height: 100%;
background: transparent;
overflow: hidden;
pointer-events: none;
}
.story_cont.collaverse-history .history .bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 100%);
}
.story_cont.collaverse-history .history .bg::after {
content: '';
position: absolute;
top: -620px;
left: 50%;
transform: translate(-50%, 0);
width: 923px;
aspect-ratio: 1 / 1;
background: #241DEE;
filter: blur(470px);
border-radius: 50%;
opacity: 0.5;
}
.story_cont.collaverse-history .history .line_wrap {
position: absolute;
inset: 0;
pointer-events: none;
}
.story_cont.collaverse-history .history .line {
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: var(--collaverse-history-line);
z-index: 2;
}
.story_cont.collaverse-history .history .line .active_line {
width: 1px;
height: var(--collaverse-arrow-length);
position: sticky;
top: calc(50vh - var(--collaverse-arrow-offset));
left: 50%;
transform: translateX(-50%);
background: var(--collaverse-history-accent);
box-shadow: 0 0 18px rgba(75, 125, 188, 0.35);
}
.story_cont.collaverse-history .history .line .active_line::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
width: 0;
height: 0;
border-style: solid;
border-width: 8px 5.5px 0 5.5px;
border-color: var(--collaverse-history-accent) transparent transparent transparent;
}
.story_cont.collaverse-history .history .history_list {
position: relative;
z-index: 3;
list-style: none;
padding: 120px 0;
margin: calc(var(--collaverse-history-height) * -1) auto 0;
}
.story_cont.collaverse-history .history .history_item {
display: flex;
gap: 140px;
margin-bottom: 100px;
position: relative;
align-items: start;
}
.story_cont.collaverse-history .history .history_item:last-child {
margin-bottom: 0;
}
.story_cont.collaverse-history .history .history_item:nth-child(even) {
flex-direction: row-reverse;
}
.story_cont.collaverse-history .history .history_item:nth-child(odd) .t_box {
text-align: right;
}
.story_cont.collaverse-history .history .history_item::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
width: 31px;
aspect-ratio: 1 / 1;
background: var(--collaverse-history-accent);
border-radius: 50%;
animation: collaverse-history-dot 1.3s ease-in-out infinite;
}
.story_cont.collaverse-history .history .history_item::after {
content: '';
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%, 0);
width: 11px;
aspect-ratio: 1 / 1;
background: var(--collaverse-history-accent);
border-radius: 50%;
z-index: 4;
}
.story_cont.collaverse-history .history .history_item .t_box,
.story_cont.collaverse-history .history .history_item .img_box {
width: 50%;
}
.story_cont.collaverse-history .history .history_item .t_box .year {
font-size: 2.125rem;
font-weight: 900;
line-height: 1.3;
color: var(--collaverse-history-accent);
margin-bottom: 16px;
}
.story_cont.collaverse-history .history .history_item .t_box .tit {
color: var(--collaverse-history-white);
white-space: nowrap;
margin: 0 0 8px;
font-size: 1.25rem;
line-height: 1.4;
font-weight: 700;
}
.story_cont.collaverse-history .history .history_item .t_box .subtxt {
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.story_cont.collaverse-history .history .img_box {
border-radius: 10px;
aspect-ratio: 121 / 64;
overflow: hidden;
filter: drop-shadow(0 1px 30px rgba(255, 255, 255, 0.2));
}
.story_cont.collaverse-history .history .img_box--placeholder {
visibility: hidden;
filter: none;
background: transparent;
}
.story_cont.collaverse-history .history .img_box img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story_cont.collaverse-history .history .history_item--text-only {
gap: 140px;
}
.story_cont.collaverse-history .history .history_item--text-only::before,
.story_cont.collaverse-history .history .history_item--text-only::after {
left: calc(50% - 0.5px);
}
@keyframes collaverse-history-dot {
0% {
transform: translate(-50%, 0) scale(1);
opacity: 0.25;
}
100% {
transform: translate(-50%, 0) scale(3);
opacity: 0;
}
}
@media (max-width: 1200px) {
.story_cont.collaverse-history .history .history_item {
gap: 80px;
}
}
@media (max-width: 1024px) {
.story_cont.collaverse-history {
--collaverse-arrow-length: 420px;
--collaverse-arrow-offset: calc(var(--collaverse-arrow-length) / 2);
}
.story_cont.collaverse-history .history .history_item {
gap: 50px;
}
.story_cont.collaverse-history .history .history_item .t_box .tit {
white-space: normal;
}
}
@media (max-width: 879px) {
.story_cont.collaverse-history {
--collaverse-arrow-length: clamp(200px, 40vh, 320px);
}
}
@media (max-width: 767px) {
.story_cont.collaverse-history {
--collaverse-history-height: 70vh;
--collaverse-arrow-length: 300px;
--collaverse-arrow-offset: calc(var(--collaverse-arrow-length) / 2);
}
.story_cont.collaverse-history .history .line {
left: 24px;
}
.story_cont.collaverse-history .history .history_item,
.story_cont.collaverse-history .history .history_item:nth-child(even) {
flex-direction: column;
gap: 24px;
padding-left: 48px;
text-align: left;
}
.story_cont.collaverse-history .history .history_item .t_box,
.story_cont.collaverse-history .history .history_item .img_box {
width: 100%;
}
.story_cont.collaverse-history .history .history_item:nth-child(odd) .t_box {
text-align: left;
}
.story_cont.collaverse-history .history .history_item::before,
.story_cont.collaverse-history .history .history_item::after {
left: 24px;
}
}
/* ============================================
Collaverse Milestones Section
============================================ */
.milestone_cont {
position: relative;
padding: 0 0 200px 0;
overflow: hidden;
}
.milestone_cont::after {
content: '';
position: absolute;
inset: 0;
background: url('/wp-content/uploads/2025/11/milestones_bg.png') no-repeat right top 0 / 539px 820px;
opacity: 0.15;
pointer-events: none;
}
.milestone_cont .milestone_list {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0px;
}
.milestone_cont .milestone_item {
position: relative;
text-align: center;
padding: 0;
--milestone-accent: var(--sub, #4b7dbc);
}
.milestone_cont .milestone_item h4 {
font-size: 1.5rem;
line-height: 1.45;
font-weight: 800;
color: var(--milestone-accent);
margin-bottom: 14px;
}
.milestone_cont .milestone_item .img_wrap {
height: 35px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.milestone_cont .milestone_item .img_wrap img {
max-height: 100%;
width: auto;
display: block;
}
.milestone_cont .milestone_item p {
margin: 0 0 6px;
font-size: 1.125rem;
line-height: 1.6;
font-weight: 600;
color: var(--black, #111);
}
.milestone_cont .milestone_item .fs16 {
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: rgba(5, 2, 15, 0.8);
}
.milestone_cont .milestone_item .line {
width: 100%;
height: 10px;
border-radius: 999px;
background: var(--milestone-accent);
margin: 18px 0 0;
position: relative;
}
.milestone_cont .milestone_item .line::after {
content: '›';
font-family: inherit;
width: 40px;
height: 40px;
border-radius: 50%;
border: 8px solid var(--milestone-accent);
color: var(--milestone-accent);
background: #fff;
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-sizing: border-box;
z-index: 2;
}
.milestone_cont .milestone_item .dots {
display: flex;
justify-content: center;
position: relative;
margin-bottom: 18px;
}
.milestone_cont .milestone_item .dots .dashed_line {
width: 1px;
height: 80px;
border-left: 1px dashed var(--milestone-accent);
}
.milestone_cont .milestone_item:nth-child(even) .dots .dashed_line {
height: 40px;
}
.milestone_cont .milestone_item .dots::before,
.milestone_cont .milestone_item .dots::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
content: '';
border-radius: 50%;
background: var(--milestone-accent);
}
.milestone_cont .milestone_item .dots::before {
width: 23px;
height: 23px;
opacity: 0.2;
bottom: -8px;
}
.milestone_cont .milestone_item .dots::after {
width: 7px;
height: 7px;
bottom: 0;
}
.milestone_cont .milestone_item:nth-child(2) {
--milestone-accent: #205CA2;
}
.milestone_cont .milestone_item:nth-child(3) {
--milestone-accent: var(--sub2, #044691);
}
.milestone_cont .milestone_item:nth-child(4) {
--milestone-accent: #0d3574;
}
.milestone_cont .milestone_item:last-child {
--milestone-accent: var(--main, #152458);
}
.milestone_cont .milestone_item:last-child .line::after {
display: none;
}
@media (max-width: 1350px) {
.milestone_cont .milestone_item h4 {
font-size: 1.35rem;
}
.milestone_cont .milestone_item .img_wrap {
height: 29px;
}
}
@media (max-width: 1100px) {
.milestone_cont .milestone_list {
grid-template-columns: repeat(3, 1fr);
}
.milestone_cont .milestone_item:nth-child(4),
.milestone_cont .milestone_item:last-child {
margin-top: 35px;
}
.milestone_cont .milestone_item .line::after {
right: 0;
}
.milestone_cont .milestone_item p br {
display: none;
}
}
@media (max-width: 879px) {
.milestone_cont .milestone_list {
grid-template-columns: repeat(2, 1fr);
gap: 0px;
}
.milestone_cont .milestone_item:nth-child(3) {
margin-top: 35px;
}
.milestone_cont .milestone_item .line {
height: 7px;
}
.milestone_cont .milestone_item .line::after {
width: 30px;
height: 30px;
border-width: 5px;
right: 0;
}
.milestone_cont .milestone_item .dots {
margin-bottom: 10px;
}
.milestone_cont .milestone_item .dots .dashed_line {
height: 30px !important;
}
.milestone_cont .milestone_item .dots::before {
bottom: -6px;
}
.milestone_cont .milestone_item .dots::after {
width: 6px;
}
.milestone_cont .milestone_item p:first-of-type {
margin-bottom: 0;
}
}
@media (max-width: 540px) {
.milestone_cont .milestone_list {
grid-template-columns: minmax(0, 1fr);
}
.milestone_cont .milestone_item {
margin-top: 0 !important;
}
}
/* ============================================
Menu Columns Layout
============================================ */
.menu-columns-layout {
padding: 60px 0;
}
.menu-columns-layout .menu-columns__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 40px;
}
.menu-columns-layout .menu-columns__column {
text-align: center;
}
.menu-columns-layout .menu-columns__title {
font-size: 1.4rem;
font-weight: 700;
color: #6b6b6b;
margin: 0 0 18px;
}
.menu-columns-layout .menu-columns__title a {
color: inherit;
text-decoration: none;
}
.menu-columns-layout .menu-columns__list {
list-style: none;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 10px;
}
.menu-columns-layout .menu-columns__list li{list-style: none !important; padding-left: 0 !important;}
.menu-columns-layout .menu-columns__item a {
color: #8a8a8a;
text-decoration: none;
font-size: 1.05rem;
transition: color 0.2s ease;
}
.menu-columns-layout .menu-columns__item a:hover {
color: var(--main, #0e7fee);
}
@media (max-width: 767px) {
.menu-columns-layout .menu-columns__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px 20px;
}
}
@media (max-width: 520px) {
.menu-columns-layout .menu-columns__grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* TinyMCE Editor Icon Fix */
#kboard-ocean-gallery-editor .mce-container .mce-btn i,
#kboard-ocean-gallery-editor .mce-container .mce-btn i::before,
#kboard-ocean-gallery-editor .mce-container .mce-btn .mce-ico,
#kboard-ocean-gallery-editor .mce-container .mce-btn .mce-ico::before {
font-family: 'tinymce' !important;
font-style: normal !important;
font-weight: normal !important;
}
#width100{width: 100% !important;}
.width100{width: 100% !important;}
/* Footer menu - Remove left padding for menu-item-24966 on mobile */
@media (max-width: 650px) {
li.menu-item-24967 {
padding-left: 0 !important;
}
li.menu-item-24975 {
padding-left: 0 !important;
}
}
/* Ensure WordPress admin UI uses correct icon fonts
#wpadminbar,
#wpadminbar *,
#wpadminbar::before,
#wpadminbar *::before,
#wpadminbar::after,
#wpadminbar *::after,
.dashicons,
.dashicons::before,
.dashicons::after,
[class*="dashicons"],
[class*="dashicons"]::before,
[class*="dashicons"]::after,
.elementor-panel,
.elementor-panel *,
.elementor-panel::before,
.elementor-panel *::before,
.elementor-navigator,
.elementor-navigator *,
.elementor-navigator::before,
.elementor-navigator *::before {
font-family: inherit !important;
}*/
/* Specific fix for admin bar icons that use ::before pseudo-elements
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon::before,
.wp-admin-bar-arrow::before {
font-family: dashicons !important;
}*/
/* Elementor icon fonts - prevent Urbanist override
.elementor-panel i,
.elementor-panel i::before,
.elementor-panel i::after,
.elementor-navigator i,
.elementor-navigator i::before,
.elementor-navigator i::after,
.elementor-icon,
.elementor-icon::before,
.elementor-icon::after,
.eicon,
.eicon::before,
.eicon::after,
[class*="eicon-"],
[class*="eicon-"]::before,
[class*="eicon-"]::after {
font-family: eicons !important;
}*/
/* Font Awesome icons */
.fa,
.fa::before,
.fa::after,
.fas,
.fas::before,
.fas::after,
.far,
.far::before,
.far::after,
.fab,
.fab::before,
.fab::after,
[class*="fa-"],
[class*="fa-"]::before,
[class*="fa-"]::after {
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}
/* ============================================
Dropdown Menu Auto Width
============================================ */
/* 드롭다운 메뉴 너비를 콘텐츠에 맞게 자동 조정 */
.dt-nav-menu-horizontal .the7-e-sub-nav {
width: auto !important;
min-width: 200px !important;
max-width: none !important;
-webkit-backdrop-filter: blur(40px) !important;
backdrop-filter: blur(40px) !important;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05) !important;
}
.dt-nav-menu-horizontal>li>.horizontal-sub-nav:before {
-webkit-backdrop-filter: blur(40px) !important;
backdrop-filter: blur(40px) !important;
}
.dt-nav-menu-horizontal li.depth-0 > a .submenu-indicator {
transition: all 0.4s !important;
}
.dt-nav-menu-horizontal li.depth-0 > a:hover .submenu-indicator {
transform:rotate(180deg) !important;
}
/* 메뉴 아이템 텍스트 한 줄로 유지 */
.dt-nav-menu-horizontal .the7-e-sub-nav .menu-item a {
white-space: nowrap !important;
}
/* 메뉴 아이템 패딩 조정 (좌우 여유 공간) */
.dt-nav-menu-horizontal .the7-e-sub-nav .menu-item a .item-content {
/* Elementor 설정을 따름 */
}
/* ============================================
Custom Search Icon
============================================ */
/* 검색 아이콘 SVG 교체 */
.elementor-element-9ea0fd7 .elementor-icon svg {
display: none !important;
}
.elementor-element-9ea0fd7 .elementor-icon {
position: relative !important;
width: 26px !important;
height: 26px !important;
}
.elementor-element-9ea0fd7 .elementor-icon::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 26px !important;
height: 26px !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
.elementor-element-7303fba .elementor-icon svg {
display: none !important;
}
.elementor-element-7303fba .elementor-icon {
position: relative !important;
width: 26px !important;
height: 26px !important;
}
.elementor-element-7303fba .elementor-icon::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 26px !important;
height: 26px !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
ul.dt-nav-menu {width: 100% !important;}
.dt-nav-menu .hover-style-bg{background: #f4f4f4 !important;}
/* ============================================
Revolution Slider - Hero Fullscreen Custom CSS
============================================ */
/* Progress Bar Bullets */
.tp-bullets {
bottom: 80px !important;
}
.tp-bullet {
width: 50px !important;
height: 3px !important;
background: rgba(255, 255, 255, 0.3) !important;
border-radius: 0px !important;
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
transition: background 0.3s ease !important;
}
.tp-bullet:hover {
background: rgba(255, 255, 255, 0.5) !important;
}
/* Hide default bullet inner circle */
.tp-bullet-inner {
display: none !important;
}
/* Progress bar animation */
.tp-bullet-inner-bar {
position: absolute !important;
left: 0 !important;
top: 0 !important;
height: 100% !important;
width: 0% !important;
background: #ffffff !important;
transition: none !important;
}
.tp-bullet.selected .tp-bullet-inner-bar {
animation: progressBar 9s linear forwards !important;
}
@keyframes progressBar {
from { width: 0%; }
to { width: 100%; }
}
/* Play/Pause Button Styling */
.tp-pause,
.tp-play {
background: rgba(255, 255, 255, 0.2) !important;
border-radius: 50% !important;
padding: 15px !important;
transition: all 0.3s ease !important;
}
.tp-pause:hover,
.tp-play:hover {
background: rgba(255, 255, 255, 0.4) !important;
transform: scale(1.1) !important;
}
/* Arrow Buttons */
.tp-leftarrow,
.tp-rightarrow {
background: rgba(255, 255, 255, 0.2) !important;
transition: all 0.3s ease !important;
}
.tp-leftarrow:hover,
.tp-rightarrow:hover {
background: rgba(255, 255, 255, 0.4) !important;
}
/* ============================================
Elementor Slides - Progress Bar Dots
============================================ */
/* Hero section inner container width */
.elementor-background-slideshow ~ .elementor-container .elementor-inner-section {
max-width: 1350px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* Button container spacing */
.elementor-background-slideshow ~ .elementor-container .elementor-widget-button {
display: inline-block !important;
margin: 10px !important;
}
/* Button alignment center */
.elementor-background-slideshow ~ .elementor-container .elementor-button-wrapper {
text-align: center !important;
}
/* Container for navigation dots */
.elementor-slides .swiper-pagination {
bottom: 30px !important;
}
/* Individual dot styling - horizontal bar shape */
.elementor-slides .swiper-pagination-bullet {
width: 50px !important;
height: 3px !important;
background: rgba(255, 255, 255, 0.3) !important;
border-radius: 0px !important;
position: relative !important;
overflow: hidden !important;
opacity: 1 !important;
margin: 0 5px !important;
transition: background 0.3s ease !important;
}
.elementor-slides .swiper-pagination-bullet:hover {
background: rgba(255, 255, 255, 0.5) !important;
}
/* Progress bar animation for active dot */
.elementor-slides .swiper-pagination-bullet::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: #ffffff;
transition: none;
}
.elementor-slides .swiper-pagination-bullet-active::before {
animation: elementorProgressBar 9s linear forwards;
}
.elementor-slides .swiper-pagination-bullet-active {
background: rgba(255, 255, 255, 0.3) !important;
}
@keyframes elementorProgressBar {
from { width: 0%; }
to { width: 100%; }
}
/* Arrow buttons - hidden */
.elementor-slides .elementor-swiper-button {
display: none !important;
}
/* ============================================
Background Slideshow Progress Bar
============================================ */
/* Progress bar container at bottom */
.slideshow-progress-container {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
width: 1350px;
max-width: calc(100% - 40px);
padding: 0 20px;
display: flex;
align-items: center;
gap: 10px;
z-index: 10;
justify-content: flex-start;
}
/* Play/Pause button */
.slideshow-play-pause {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0);
border-radius: 0;
color: #ffffff;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin-right: 0px;
padding: 0;
flex-shrink: 0;
}
.slideshow-play-pause:hover {
background: rgba(255, 255, 255, 0);
transform: scale(1.1);
}
.slideshow-play-pause:active {
transform: scale(0.95);
}
.slideshow-play-pause .play-icon,
.slideshow-play-pause .pause-icon {
line-height: 1;
}
/* Individual progress bar */
.slideshow-progress-bar {
width: 50px;
height: 3px;
background: rgba(255, 255, 255, 0.3);
border-radius: 0px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.slideshow-progress-bar:hover {
background: rgba(255, 255, 255, 0.5);
}
/* Progress fill animation */
.slideshow-progress-bar::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: #ffffff;
transition: none;
}
.slideshow-progress-bar.active::before {
animation: slideshowProgress 6s linear forwards;
-webkit-animation: slideshowProgress 6s linear forwards;
}
@keyframes slideshowProgress {
from { width: 0%; }
to { width: 100%; }
}
@-webkit-keyframes slideshowProgress {
from { width: 0%; }
to { width: 100%; }
}
/* ============================================
Background Slideshow Zoom Effect
============================================ */
/* Ken Burns 줌 효과 - 줌인 상태에서 원래 사이즈로 (윈도우 크롬 호환) */
.elementor-background-slideshow__slide__image {
transform: scale(1.1);
transition: transform 3s ease-out;
will-change: transform;
-webkit-transform: scale(1.1);
-webkit-transition: -webkit-transform 3s ease-out;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Swiper 활성 슬라이드 */
.swiper-slide-active .elementor-background-slideshow__slide__image {
transform: scale(1);
-webkit-transform: scale(1);
}
/* ============================================
Custom Button Styles
============================================ */
/* Rainbow Border Button (Explore Showcase 스타일) */
.rainbow-border-btn .elementor-button {
position: relative !important;
border-radius: 10px !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.rainbow-border-btn .elementor-button:hover {
box-shadow: 0px 1px 20px 0px rgba(75, 125, 188, 1) !important;
background-color: #4287FF !important;
transition: all .3s linear !important;
}
/* 회전하는 무지개 라인 */
.rainbow-border-btn .elementor-button::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
height: 200px !important;
scale: 4 0.8 !important;
background: conic-gradient(
rgba(52, 168, 82, 0) 10deg,
rgba(52, 168, 82, 1) 38.9738deg,
rgba(255, 211, 20, 1) 62.3678deg,
rgba(255, 70, 65, 1) 87.0062deg,
rgba(49, 134, 255, 1) 107.428deg,
rgba(49, 134, 255, 0.5) 150deg,
rgba(49, 134, 255, 0) 200deg,
rgba(52, 168, 82, 0) 360deg
) !important;
animation: rotateBorder 2s linear infinite !important;
translate: 0 -80px !important;
z-index: 0 !important;
}
/* 내부 배경 */
.rainbow-border-btn .elementor-button::after {
content: '' !important;
position: absolute !important;
width: calc(100% - 4px) !important;
height: calc(100% - 4px) !important;
inset: 2px !important;
border-radius: 10px !important;
background-color: #001F63 !important;
z-index: 0 !important;
}
.rainbow-border-btn .elementor-button:hover::after {
background-color: #4287FF !important;
transition: all .3s linear !important;
}
/* 텍스트 */
.rainbow-border-btn .elementor-button span {
position: relative !important;
z-index: 1 !important;
color: #ffffff !important;
}
@keyframes rotateBorder {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Solid Button (Book a Consultation 스타일) - v7.2 */
.solid-btn.elementor-button,
.elementor-button.solid-btn,
a.solid-btn,
.solid-btn {
position: relative !important;
overflow: hidden !important;
color:#fff;
font-weight: 700;
}
/* Effect Wrapper - 버튼 전체 영역을 덮도록 absolute 포지셔닝 */
.solid-btn-effect-wrapper {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* 원본 텍스트 - 기본 위치 (중앙 정렬) */
.solid-btn-text-original {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform 0.3s linear !important;
pointer-events: none !important;
}
/* 복제 텍스트 - 버튼 높이만큼 아래에 대기 (중앙 정렬) */
.solid-btn-text-clone {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: translateY(var(--button-height, 50px)) !important;
transition: transform 0.3s linear !important;
pointer-events: none !important;
}
/* hover 시 원본은 버튼 높이만큼 위로, 복제는 원래 위치(0)로 */
.solid-btn:hover .solid-btn-text-original {
transform: translateY(calc(var(--button-height, 50px) * -1)) !important;
}
.solid-btn:hover .solid-btn-text-clone {
transform: translateY(0) !important;
}
/* ============================================
Collaverse in Action Carousel - Half Visible Edges with Gradient
Only applies to elementor-20806
============================================ */
/* IMPORTANT: Using elementor page class for specificity */
.elementor-20806 .elementor-element.elementor-element-7467cf7 {
position: relative !important;
overflow: hidden !important;
}
/* Allow overflow to show half items on edges */
.elementor-20806 .elementor-element.elementor-element-7467cf7 .owl-stage-outer {
overflow: visible !important;
}
/* Desktop: Half card visible (50%) - Default */
.elementor-20806 .elementor-element.elementor-element-7467cf7 .portfolio-shortcode {
padding-left: calc(50% / 6) !important;
padding-right: calc(50% / 6) !important;
}
/* Left gradient overlay */
.elementor-20806 .elementor-element.elementor-element-7467cf7::before {
content: '' !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 200px !important;
height: 100% !important;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
/* Right gradient overlay */
.elementor-20806 .elementor-element.elementor-element-7467cf7::after {
content: '' !important;
position: absolute !important;
right: 0 !important;
top: 0 !important;
width: 200px !important;
height: 100% !important;
background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
z-index: 10 !important;
pointer-events: none !important;
}
/* 1350px and below: 1/3 card visible (33.33%) */
@media (max-width: 1350px) {
.elementor-20806 .elementor-element.elementor-element-7467cf7 .portfolio-shortcode {
padding-left: calc(33.33% / 6) !important;
padding-right: calc(33.33% / 6) !important;
}
.elementor-20806 .elementor-element.elementor-element-7467cf7::before,
.elementor-20806 .elementor-element.elementor-element-7467cf7::after {
width: 150px !important;
}
}
/* 1024px and below: 1/4 card visible (25%) */
@media (max-width: 1024px) {
.elementor-20806 .elementor-element.elementor-element-7467cf7 .portfolio-shortcode {
padding-left: calc(25% / 6) !important;
padding-right: calc(25% / 6) !important;
}
.elementor-20806 .elementor-element.elementor-element-7467cf7::before,
.elementor-20806 .elementor-element.elementor-element-7467cf7::after {
width: 120px !important;
}
}
/* 879px and below (Mobile): Disable partial view, keep clean */
@media (max-width: 879px) {
/* Reset to clean mobile view - allow vertical overflow for full image */
.elementor-20806 .elementor-element.elementor-element-7467cf7 {
overflow: visible !important;
}
.elementor-20806 .elementor-element.elementor-element-7467cf7 .owl-stage-outer {
overflow: visible !important;
}
.elementor-20806 .elementor-element.elementor-element-7467cf7 .portfolio-shortcode {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure full image height is visible */
.elementor-20806 .elementor-element.elementor-element-7467cf7 .owl-item,
.elementor-20806 .elementor-element.elementor-element-7467cf7 article {
overflow: visible !important;
}
/* Hide gradients on mobile for clean view */
.elementor-20806 .elementor-element.elementor-element-7467cf7::before,
.elementor-20806 .elementor-element.elementor-element-7467cf7::after {
display: none !important;
}
/* Reduce button size for mobile to fit in one line */
/* Override Elementor's width:100% at 1024px breakpoint */
body .elementor-20806 .elementor-element.elementor-element-button1.elementor-widget-button,
body .elementor-20806 .elementor-element.elementor-element-button2.elementor-widget-button {
width: auto !important;
max-width: none !important;
flex: 0 1 auto !important;
display: inline-block !important;
}
/* Add small gap between buttons */
body .elementor-20806 .elementor-element.elementor-element-button1.elementor-widget-button {
margin-right: 8px !important;
}
.elementor-20806 .elementor-element.elementor-element-button2 .elementor-button, .elementor-20806 .elementor-element.elementor-element-button2 .elementor-button .elementor-button-icon {
font-size: 0.7rem !important;
}
.solid-btn{font-size: 0.7rem !important;}
/* Reduce button content size - VERY SPECIFIC */
body .elementor-20806 .elementor-element.elementor-element-button1 .elementor-button,
body .elementor-20806 .elementor-element.elementor-element-button2 .elementor-button,
body .elementor-20806 .elementor-element.elementor-element-button1 .elementor-button *,
body .elementor-20806 .elementor-element.elementor-element-button2 .elementor-button * {
font-size: 0.7rem !important;
white-space: nowrap !important;
}
body .elementor-20806 .elementor-element.elementor-element-button1 .elementor-button,
body .elementor-20806 .elementor-element.elementor-element-button1 .elementor-button * {
padding: 8px !important;
line-height: 1 !important;
}
body .elementor-20806 .elementor-element.elementor-element-button2 .elementor-button,
body .elementor-20806 .elementor-element.elementor-element-button2 .elementor-button * {
padding: 6px 8px!important;
line-height: 1 !important;
}
/* Force icon and text size */
body .elementor-20806 .elementor-element.elementor-element-button1 .elementor-button .elementor-button-icon,
body .elementor-20806 .elementor-element.elementor-element-button2 .elementor-button .elementor-button-icon,
body .elementor-20806 .elementor-element.elementor-element-button1 .elementor-button .elementor-button-text,
body .elementor-20806 .elementor-element.elementor-element-button2 .elementor-button .elementor-button-text {
font-size: 0.7rem !important;
}
}
/* ============================================
New Buttons: Discover More & Request a demo
Applied to ALL screen sizes
============================================ */
/* Fix parent container - d5eb73e has flex-direction:column */
.elementor-20806 .elementor-element.elementor-element-d5eb73e {
--flex-direction: row !important;
flex-direction: row !important;
--flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
/* Fix child container to display buttons in a row */
.elementor-20806 .elementor-element.elementor-element-1dcf7c2 {
--flex-direction: row !important;
flex-direction: row !important;
--flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
/* Button container - inline display for all sizes */
body .elementor-20806 .elementor-element.elementor-element-7d57224.elementor-widget-button,
body .elementor-20806 .elementor-element.elementor-element-6ac76d1.elementor-widget-button {
width: auto !important;
max-width: none !important;
flex: 0 1 auto !important;
}
/* Font size and styling for new buttons */
body .elementor-20806 .elementor-element.elementor-element-7d57224 .elementor-button,
body .elementor-20806 .elementor-element.elementor-element-6ac76d1 .elementor-button,
body .elementor-20806 .elementor-element.elementor-element-7d57224 .elementor-button *,
body .elementor-20806 .elementor-element.elementor-element-6ac76d1 .elementor-button * {
white-space: nowrap !important;
}
/* ============================================
YouTube Video - Hide All Controls & Branding
Customer Success Stories Section
============================================ */
/* Target specific video widget - element 93a3082 */
.elementor-20806 .elementor-element.elementor-element-93a3082 {
position: relative !important;
overflow: hidden !important;
}
/* Hide YouTube controls for this specific video */
.elementor-20806 .elementor-element.elementor-element-93a3082 iframe[src*="youtube"],
.elementor-20806 .elementor-element.elementor-element-93a3082 iframe[src*="youtube-nocookie"],
.elementor-20806 .elementor-element.elementor-element-93a3082 .elementor-video iframe {
pointer-events: none !important;
}
/* Add transparent overlay to block all YouTube UI interactions */
.elementor-20806 .elementor-element.elementor-element-93a3082::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 10 !important;
pointer-events: auto !important;
background: transparent !important;
}
/* Also target the widget wrapper */
.elementor-20806 .elementor-element.elementor-element-93a3082 .elementor-widget-container {
position: relative !important;
}
/* Hide all YouTube branding elements */
.elementor-20806 .elementor-element.elementor-element-93a3082 .ytp-chrome-top,
.elementor-20806 .elementor-element.elementor-element-93a3082 .ytp-title,
.elementor-20806 .elementor-element.elementor-element-93a3082 .ytp-watermark,
.elementor-20806 .elementor-element.elementor-element-93a3082 .ytp-gradient-top,
.elementor-20806 .elementor-element.elementor-element-93a3082 .ytp-show-cards-title {
display: none !important;
opacity: 0 !important;
}
/* ============================================
Reusable Class: Background Video Cover Style
Usage: Add class "bg-video-cover" to any container/section
============================================ */
/* Make background video cover the container */
.bg-video-cover .elementor-background-video-container,
.bg-video-cover .elementor-background-video-embed {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.bg-video-cover .elementor-background-video-container iframe,
.bg-video-cover .elementor-background-video-container video,
.bg-video-cover .elementor-background-video-embed iframe {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) scale(1.2) !important;
width: 100% !important;
height: 100% !important;
min-width: 115% !important;
min-height: 115% !important;
object-fit: cover !important;
}
/* Ensure container has position relative */
.bg-video-cover {
position: relative !important;
overflow: hidden !important;
}
/* ============================================
Reusable Class: Clickable Link Container
Usage: Add class "clickable-link" + data-link="URL"
============================================ */
/* Make container clickable with hover effect */
.clickable-link {
cursor: pointer !important;
position: relative !important;
}
/* Allow clicks to pass through child elements to parent */
/* IMPORTANT: Only target elements inside Elementor post content, never admin UI */
.elementor-20806 .elementor-element.clickable-link > *,
.elementor .elementor-element.clickable-link > * {
pointer-events: none !important;
}
.elementor-20806 .elementor-element.clickable-link > * > *,
.elementor .elementor-element.clickable-link > * > * {
pointer-events: none !important;
}
/* Hover effect - subtle lift */
.clickable-link:hover {
transform: translateY(0px) !important;
box-shadow: 0px 0px 20px 5px rgba(75, 123, 188, 0.3) !important;
}
/* Active/Click effect */
.clickable-link:active {
transform: translateY(0px) !important;
}
/* ============================================
Carousel Hover Icon - Move to Top Right with Circle Background
============================================ */
/* Move hover icon to top right corner and always show */
.the7_elements_carousel-7467cf7 .the7-hover-icon {
position: absolute !important;
top: 15px !important;
right: 15px !important;
left: auto !important;
bottom: auto !important;
transform: translate(0, 0) !important;
opacity: 1 !important;
visibility: visible !important;
/* Circle background - normal state */
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
min-height: 26px !important;
max-width: 26px !important;
max-height: 26px !important;
background-color: rgba(255, 255, 255, 0.95) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Normal state - small icon inside circle */
.the7_elements_carousel-7467cf7 .the7-hover-icon svg {
width: 12px !important;
height: 12px !important;
min-width: 12px !important;
min-height: 12px !important;
max-width: 12px !important;
max-height: 12px !important;
fill: #152458 !important;
transition: all 0.3s ease !important;
}
/* Remove any inner wrapper styling */
.the7_elements_carousel-7467cf7 .the7-hover-icon > * {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Hover state - larger circle and let Elementor handle icon */
.the7_elements_carousel-7467cf7 .post:hover .the7-hover-icon {
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
max-width: 50px !important;
max-height: 50px !important;
background-color: #4B7DBC !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.the7_elements_carousel-7467cf7 .post:hover .the7-hover-icon svg {
/* Elementor's hover size and color will apply here */
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
fill: #fff !important;
}
/* ============================================
Footer Logo Color Change
Change "colla" to white, keep "verse" and slash blue
============================================ */
/* Change "colla" part (d_blue_type) to white */
#footer .the7-logo-wrap svg .d_blue_type,
footer .the7-logo-wrap svg .d_blue_type,
.elementor-location-footer .the7-logo-wrap svg .d_blue_type,
.elementor-widget-the7-logo-widget svg .d_blue_type {
fill: #FFFFFF !important;
}
/* Keep "verse" and slash (l_blue_type) blue - optional, for clarity */
#footer .the7-logo-wrap svg .l_blue_type,
footer .the7-logo-wrap svg .l_blue_type,
.elementor-location-footer .the7-logo-wrap svg .l_blue_type,
.elementor-widget-the7-logo-widget svg .l_blue_type {
fill: #327FEF !important;
}
/* ============================================
Footer Logo Layout - Horizontal Alignment
Make foot_logo2.svg and foot_ci.svg side by side
============================================ */
/* Container for both logos - horizontal layout */
.elementor-element-bf7ad6d {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
}
/* ============================================
Footer Bottom Bar Menu - Add separator between items
============================================ */
/* Add | separator between menu items - use pseudo-element on the link
.elementor-element-bd3d545 .dt-nav-menu-horizontal > li:not(:last-child) > a::after {
content: '|';
margin-left: 15px;
color: currentColor;
font-weight: normal;
}*/
/* ============================================
Single Page Sub Menu - Hover and Active Font Weight
============================================ */
/* Active/Current menu item */
.elementor-page-5343 .dt-nav-menu-horizontal .current-menu-item > a,
.elementor-page-5343 .dt-nav-menu-horizontal .act > a,
.elementor-page-5343 .dt-nav-menu-horizontal .active > a {
font-weight: 700 !important;
}
/* ============================================
YouTube Background Video Controls
============================================ */
.yt-bg-controls {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
gap: 10px;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* 섹션에 마우스 오버 시 컨트롤 표시 */
.youtube-control:hover .yt-bg-controls {
opacity: 1;
visibility: visible;
}
.yt-control-btn {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.yt-control-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.yt-control-btn svg {
width: 24px;
height: 24px;
pointer-events: none;
}
.yt-control-btn.active {
background: rgba(255, 255, 255, 0.1);
}
.yt-control-btn.active:hover {
background: rgba(255, 255, 255, 0.2);
}
/* 모바일 반응형 */
@media (max-width: 768px) {
.yt-bg-controls {
bottom: 20px;
right: 20px;
gap: 8px;
}
.yt-control-btn {
width: 44px;
height: 44px;
}
.yt-control-btn svg {
width: 20px;
height: 20px;
}
}
/* ==========================================
Coming Soon Text Overlay (마우스 오버 시 텍스트만 표시)
========================================== */
.coming-soon-text {
position: relative;
}
.coming-soon-text::after {
content: "Coming soon";
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1rem;
font-weight: 500;
color: #ffffff;
background: rgba(23, 23, 23, 0.44);
padding: 0.375rem 0.75rem;
border-radius: 50px;
/*backdrop-filter: blur(5px);*/
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
z-index: 10;
pointer-events: none;
}
.coming-soon-text:hover::after {
opacity: 1;
visibility: visible;
}
/* 모바일 반응형 */
@media (max-width: 650px) {
.coming-soon-text::after {
font-size: 0.7rem;
padding: 0.3rem 0.6rem;
}
}
/* ==========================================
Background Zoom Out Effect (1.1 → 1.0)
========================================== */
.bg-zoom-out {
overflow: hidden;
position: relative;
}
/* 컨테이너 자체에 줌 효과 적용 (백그라운드 포함) */
.bg-zoom-out::before {
content: "";
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
background: inherit;
background-size: cover;
background-position: center;
animation: bgZoomOut 1.2s ease-out forwards;
transform-origin: center center;
z-index: 0;
}
/* 자식 요소들을 앞으로 */
.bg-zoom-out > * {
position: relative;
z-index: 1;
}
/* Elementor 백그라운드 오버레이가 있는 경우 */
.bg-zoom-out .elementor-background-overlay {
animation: bgZoomOut 1.2s ease-out forwards;
transform-origin: center center;
}
/* 일반 이미지 요소 줌아웃 */
.bg-zoom-out-img {
overflow: hidden;
}
.bg-zoom-out-img img,
.bg-zoom-out-img .elementor-widget-image img {
animation: bgZoomOut 1.2s ease-out forwards;
transform-origin: center center;
}
@keyframes bgZoomOut {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1.0);
}
}
/* ==========================================
Auto Submenu (자동 형제 메뉴 표시)
========================================== */
.auto-submenu {
width: 100%;
}
.auto-submenu-list {
display: flex;
justify-content: center;
list-style: none;
margin: 0 !important;
padding: 0;
gap: 20px;
}
.auto-submenu-item {
margin: 0;
padding: 0 10px;
list-style: none;
}
.auto-submenu-link {
display: block;
padding: 15px 3px;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
font-size:1rem;
color:#11111180;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
position: relative;
}
/* Bottom bar - 가운데부터 좌우로 커지는 애니메이션 */
.auto-submenu-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: #152458;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.auto-submenu-link:hover {
color:#152458;
}
.auto-submenu-link:hover::after {
width: calc(100% - 6px);
}
.auto-submenu-item.current-menu-item .auto-submenu-link {
font-weight: 600;
color:#152458;
}
.auto-submenu-item.current-menu-item .auto-submenu-link::after {
width: calc(100% - 6px);
}
/* 모바일 래퍼 (기본 숨김) */
.auto-submenu-mobile-wrapper {
display: none;
}
/* 모바일 반응형 */
@media (max-width: 980px) {
.auto-submenu-link {
font-size: 0.85rem;
}
}
@media (max-width: 720px) {
.auto-submenu-item {
padding: 0 7px;
}
.auto-submenu-link {
font-size: 0.80rem;
}
}
/* 650px 이하: 가로 배치 드롭다운 */
@media (max-width: 650px) {
.elementor-element-36134eb{border-bottom: none !important;}
/* 데스크톱 메뉴 숨김 */
.auto-submenu-list {
display: none !important;
}
/* 모바일 래퍼 표시 */
.auto-submenu-mobile-wrapper {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
width: 100%;
}
.auto-submenu-parent-box,
.auto-submenu-dropdown-box {
min-width: 0;
overflow: hidden;
}
.auto-submenu-parent-link,
.auto-submenu-dropdown-header {
min-width: 0;
}
/* 1차 메뉴 박스 (왼쪽) */
.auto-submenu-parent-box {
background: #fff;
border-right: none;
}
.auto-submenu-parent-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
font-size: 1rem;
font-weight: 600;
color: #152458;
text-decoration: none;
height: 100%;
}
.auto-submenu-parent-title-text {
flex: 1;
font-size: 0.85rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.auto-submenu-parent-icon {
display: flex;
align-items: center;
margin-left: 10px;
}
/* 2차 메뉴 드롭다운 박스 (오른쪽) */
.auto-submenu-dropdown-box {
background: #152458;
max-width: 100%;
}
.auto-submenu-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
color: #ffffff;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.auto-submenu-current-title {
flex: 1 1 0%;
font-size: 0.85rem;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0;
max-width: 100%;
}
.auto-submenu-toggle {
display: flex;
align-items: center;
transition: transform 0.3s ease;
margin-left: 10px;
}
.auto-submenu-dropdown-box.active .auto-submenu-toggle {
transform: rotate(180deg);
}
/* 드롭다운 리스트 - 전체 넓이 */
.auto-submenu-dropdown-list {
display: none;
position: absolute;
width: 100%;
top: 100%;
left: 0;
right: 0;
background: #ffffff;
border: none;
border-top: none;
list-style: none;
margin: 0 !important;
padding: 0;
z-index: 100;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* 모바일 래퍼를 relative로 설정 */
.auto-submenu-mobile-wrapper {
position: relative;
}
/* 드롭다운이 래퍼 기준으로 전체 넓이 */
.auto-submenu-dropdown-box.active .auto-submenu-dropdown-list {
display: block;
left: 0;
width: 200%;
margin-left: -100%;
}
.auto-submenu-dropdown-item {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #f0f0f0;
}
.auto-submenu-dropdown-item:last-child {
border-bottom: none;
}
.auto-submenu-dropdown-link {
display: block;
padding: 10px 20px;
font-size: 0.8rem;
color: #333333;
text-decoration: none;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100%;
}
.auto-submenu-dropdown-link:hover {
color: #152458;
}
.auto-submenu-dropdown-item.current-menu-item {
background: #152458;
}
.auto-submenu-dropdown-item.current-menu-item .auto-submenu-dropdown-link {
color: #ffffff;
font-weight: 600;
}
}
/* ==========================================
1차 메뉴별 조건부 컨테이너 표시
========================================== */
/* Solutions 메뉴에서만 표시 */
.show-on-solutions {
display: none !important;
}
body.parent-menu-solutions .show-on-solutions {
display: block !important;
}
/* Professional Services 메뉴에서만 표시 */
.show-on-professional-services {
display: none !important;
}
body.parent-menu-professional-services .show-on-professional-services {
display: block !important;
}
/* Resources 메뉴에서만 표시 */
.show-on-resources {
display: none !important;
}
body.parent-menu-resources .show-on-resources {
display: block !important;
}
/* About us 메뉴에서만 표시 */
.show-on-about-us{
display: none !important;
}
body.parent-menu-about-us .show-on-about-us {
display: block !important;
}
/* Contact Download */
.show-on-contact-demo {
display: none !important;
}
body.parent-menu-contact-download .show-on-contact-demo {
display: block !important;
}
/* User Guide */
.show-on-user-guide {
display: none !important;
}
body.parent-menu-user-guide .show-on-user-guide {
display: block !important;
}
/* ============================================
Our Technology Page (25609) - Intent-Driven Collaboration
Circular Layout with 4 Features
Based on https://qa-www.collaverse.com:8443/about/technology.php
============================================ */
/* Main container */
.tech_cont_box {
position: relative;
max-width: 1350px;
height: 700px;
margin: 20px auto;
padding: 40px 0;
}
/* Center circle - Intent-Driven Collaboration */
.tech_cont_box .t_box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 700px;
background: linear-gradient(135deg, rgba(230, 235, 255, 0.6) 0%, rgba(245, 248, 255, 0.9) 100%);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.06);
z-index: 1;
}
.tech_cont_box .t_box .tit {
font-size: 2.8rem;
font-weight: 700;
line-height: 1.2;
margin: 0;
color: #1a1a1a;
background: #fff;
border-radius: 50%;
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
}
.tech_cont_box .t_box .tit span {
font-size: 1.6rem;
font-weight: 300;
display: block;
margin-top: 10px;
color: #1a1a1a;
opacity: 0.85;
}
/* Small circles inside center - hidden */
.tech_cont_box .t_box_list {
display: none;
}
/* Content lists container */
.tech_cont_box .cont_list {
position: absolute;
width: 100%;
height: 350px;
list-style: none;
margin: 0 !important;
padding: 0;
left: 0;
}
/* Individual feature items */
.tech_cont_box .cont_list > li {
position: absolute;
display: flex;
align-items: center;
gap: 25px;
max-width: 500px;
z-index: 2;
list-style: none;
margin: 0 !important;
padding: 0;
}
/* First list - top items */
.tech_cont_box .cont_list:first-of-type {
top: 0;
}
.tech_cont_box .cont_list:first-of-type > li:first-child {
top: 60px;
left: 30px;
justify-content: flex-end;
text-align: right;
flex-direction: row-reverse;
}
.tech_cont_box .cont_list:first-of-type > li:last-child {
top: 60px;
right: 30px;
justify-content: flex-start;
text-align: left;
}
/* Second list - bottom items */
.tech_cont_box .cont_list:nth-of-type(2) {
bottom: 0;
}
.tech_cont_box .cont_list:nth-of-type(2) > li:first-child {
bottom: 60px;
left: 30px;
justify-content: flex-end;
text-align: right;
flex-direction: row-reverse;
}
.tech_cont_box .cont_list:nth-of-type(2) > li:last-child {
bottom: 60px;
right: 30px;
justify-content: flex-start;
text-align: left;
}
/* Feature circle button */
.tech_cont_box .cont_list .circle {
width: 140px;
height: 140px;
min-width: 140px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1rem;
font-weight: 600;
text-align: center;
padding: 25px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
line-height: 1.3;
}
/* Gradient backgrounds for each feature */
.tech_cont_box .cont_list:first-of-type > li:first-child .circle {
background: linear-gradient(180deg, #4A7DD9 0%, #2B57A8 100%);
}
.tech_cont_box .cont_list:first-of-type > li:last-child .circle {
background: linear-gradient(180deg, #3EBFB7 0%, #2B7CB8 100%);
}
.tech_cont_box .cont_list:nth-of-type(2) > li:first-child .circle {
background: linear-gradient(180deg, #D74D91 0%, #6B4DB8 100%);
}
.tech_cont_box .cont_list:nth-of-type(2) > li:last-child .circle {
background: linear-gradient(180deg, #8B59D4 0%, #5B3D9E 100%);
}
/* Feature text content */
.tech_cont_box .list_t_box {
flex: 1;
max-width: 330px;
}
.tech_cont_box .list_t_box h5 {
font-size: 1.3rem;
font-weight: 600;
margin: 0 0 8px 0;
line-height: 1.3;
color: #1a1a1a;
}
.tech_cont_box .list_t_box h5 span {
color: #4B7DBC;
font-weight: 700;
}
.tech_cont_box .list_t_box {
font-size: 0.95rem;
line-height: 1.5;
color: #555;
}
/* Mobile layout - 1024px and below */
@media (max-width: 1024px) {
.tech_cont_box {
height: auto;
margin: 0 auto;
padding: 0px;
}
/* Hide center circle on mobile */
.tech_cont_box .t_box {
position: static;
transform: none;
width: auto;
height: 200px;
background: transparent;
box-shadow: none;
padding: 0;
margin-bottom: 0px;
}
.tech_cont_box .t_box .tit {
font-size: 2rem;
text-align: center;
height:150px;
}
.tech_cont_box .t_box .tit span {
font-size: 2rem;
font-weight: 300;
margin-top: 0;
}
/* Hide small circles inside center */
.tech_cont_box .t_box_list {
display: none;
}
/* Mobile vertical layout */
.tech_cont_box .cont_list {
position: static;
height: auto;
margin-bottom: 0 !important;
}
.tech_cont_box .cont_list > li {
position: static !important;
flex-direction: row !important;
text-align: left !important;
max-width: 100%;
margin-bottom: 40px !important;
gap: 20px;
}
/* Only remove margin from the very last item */
.tech_cont_box .cont_list:nth-of-type(2) > li:last-child {
margin-bottom: 0 !important;
}
/* Mobile circles - smaller */
.tech_cont_box .cont_list .circle {
width: 100px;
height: 100px;
min-width: 100px;
font-size: 0.8rem;
padding: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Mobile content */
.tech_cont_box .list_t_box {
flex: 1;
max-width: 100%;
padding-top: 5px;
}
.tech_cont_box .list_t_box h5 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.tech_cont_box .list_t_box {
font-size: 0.9rem;
}
}
/* Tablet adjustments */
@media (max-width: 1200px) and (min-width: 1025px) {
.tech_cont_box {
height: 600px;
}
.tech_cont_box .t_box {
width: 600px;
height: 600px;
padding: 50px;
}
.tech_cont_box .t_box .tit {
font-size: 2.2rem;
width: 300px;
height: 300px;
padding: 30px;
}
.tech_cont_box .t_box .tit span {
font-size: 1.3rem;
}
.tech_cont_box .cont_list {
height: 300px;
}
.tech_cont_box .cont_list > li {
max-width: 360px;
}
.tech_cont_box .cont_list:first-of-type > li:first-child,
.tech_cont_box .cont_list:first-of-type > li:last-child {
top: 50px;
}
.tech_cont_box .cont_list:nth-of-type(2) > li:first-child,
.tech_cont_box .cont_list:nth-of-type(2) > li:last-child {
bottom: 50px;
}
.tech_cont_box .cont_list:first-of-type > li:first-child,
.tech_cont_box .cont_list:nth-of-type(2) > li:first-child {
left: 20px;
}
.tech_cont_box .cont_list:first-of-type > li:last-child,
.tech_cont_box .cont_list:nth-of-type(2) > li:last-child {
right: 20px;
}
.tech_cont_box .cont_list .circle {
width: 120px;
height: 120px;
min-width: 120px;
font-size: 0.9rem;
padding: 20px;
}
.tech_cont_box .list_t_box {
max-width: 240px;
}
.tech_cont_box .list_t_box h5 {
font-size: 1.15rem;
}
.tech_cont_box .list_t_box {
font-size: 0.88rem;
}
}
/* ============================================
KBoard Search Results Table Styles
============================================ */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.kboard-search-results .kboard-list--whitepaper {
margin-top: 8px;
}
.kboard-search-results .kb-whitepaper-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 16px;
color: #1f1f1f;
}
.kboard-search-results .kb-whitepaper-table thead tr {
border-top: 2px solid #111;
}
.kboard-search-results .kb-whitepaper-table thead th {
padding: 18px 24px;
font-size: 16px;
font-weight: 600;
text-align: center;
border-bottom: 1px solid #d9d9d9;
}
.kboard-search-results .kb-whitepaper-table tbody tr {
border-bottom: 1px solid #ededed;
transition: background-color 0.2s ease;
}
.kboard-search-results .kb-whitepaper-table tbody tr:hover {
background-color: #fafafa;
}
.kboard-search-results .kb-whitepaper-table tbody td {
padding: 17px 10px;
vertical-align: middle;
}
.kboard-search-results .kb-col-no {
width: 8%;
font-weight: 600;
color: #818181;
text-align: center;
}
.kboard-search-results .kb-col-title {
width: auto;
text-align: left;
}
.kboard-search-results .kb-col-date {
width: 15%;
text-align: center;
font-size: 15px;
color: #7b7b7b;
}
.kboard-search-results .kb-col-view {
width: 8%;
text-align: center;
font-size: 15px;
color: #7b7b7b;
}
.kboard-search-results .kb-row-notice {
background-color: #f4f6ff;
font-weight: 600;
}
.kboard-search-results .kb-row-notice .kb-col-no {
color: #1f2ee5;
}
.kboard-search-results .kb-row-popular .kb-col-no {
color: #ff8a3d;
}
.kboard-search-results .kb-title-link {
display: block;
text-decoration: none;
color: #1f1f1f;
transition: color 0.2s ease;
}
.kboard-search-results .kb-title-link:hover {
color: #4B7DBC;
}
.kboard-search-results .kb-title-text {
font-size: 16px;
line-height: 1.5;
}
.kboard-search-results .kb-mobile-meta {
display: none;
margin-top: 8px;
font-size: 14px;
color: #999;
}
.kboard-search-results .kb-meta-item {
margin-right: 8px;
}
.kboard-search-results .kb-meta-dot {
display: inline-block;
width: 3px;
height: 3px;
background-color: #d9d9d9;
border-radius: 50%;
margin: 0 8px;
vertical-align: middle;
}
/* No results message */
.kboard-no-results {
text-align: center;
padding: 60px 20px;
color: #999;
font-size: 16px;
}
/* Mobile responsive */
@media (max-width: 768px) {
.kboard-search-results .kb-whitepaper-table thead {
display: none;
}
.kboard-search-results .kb-whitepaper-table,
.kboard-search-results .kb-whitepaper-table tbody,
.kboard-search-results .kb-whitepaper-table tr,
.kboard-search-results .kb-whitepaper-table td {
display: block;
width: 100%;
}
.kboard-search-results .kb-whitepaper-table tr {
border: 1px solid #ededed;
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
}
.kboard-search-results .kb-whitepaper-table tbody td {
padding: 16px 18px;
text-align: left;
}
.kboard-search-results .kb-col-no {
text-align: left;
font-size: 14px;
color: #7b7b7b;
}
.kboard-search-results .kb-col-date,
.kboard-search-results .kb-col-view {
display: none;
}
.kboard-search-results .kb-mobile-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
}
}
/**/
.videoBox {
aspect-ratio: 16 / 9.013;
box-sizing: border-box;
max-width: 545px;
overflow: hidden;
border-radius: 10px;
border: 2px solid #fff;
}
.ehDTFabIframeWrap.full {
width: 100vw;
position: fixed;
max-width: none;
height: 100vh;
top: 0;
left: 0;
margin-top: 0;
z-index: 1000000;
border-radius: 0;
}
.ehDTFabIframeWrap {
width: 100%;
display: flex;
justify-content: center;
position: relative;
overflow: hidden;
}
.ehDTFabLoadingWrap,
.ehDTFabIframeWrap iframe {
width: 100%;
height: 100%;
}
.ehDTFabLoadingWrap {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
z-index: -1;
}
.ehDTFabIframeBtnWrap {
position: absolute;
bottom: 1.25rem;
right: 3rem;
z-index: 1;
opacity: 0;
pointer-events: none;
transition: .3s;
display: flex;
gap: 0.625rem;
}
.ehDTFabToggleBtn {
border: none;
padding: 0;
background: none;
border-radius: 100%;
overflow: hidden;
width: 3rem;
height: 3rem;
background: #000;
opacity: .5;
}
.ehDTFabToggleBtn img {
width: 100%;
}
@media (hover: hover) and (pointer: fine) {
.ehDTFabIframeWrap:hover .ehDTFabIframeBtnWrap {
opacity: 1;
pointer-events: all;
}
}
@media all and (max-width: 680px) {
.videoBox {
width:70%;
margin: auto auto;
}
.ehDTFabToggleBtn {
width: 1.25rem;
height: 1.25rem;
border-radius: 1.25rem;
}
.ehDTFabToggleBtn img {
vertical-align: unset !important;
}
.ehDTFabIframeBtnWrap {
opacity: 1;
pointer-events: all;
}
}
/* ============================================
Scroll Drag Guide Shortcode
============================================ */
.scroll-drag-guide {
position: relative;
padding: 16px 0;
text-align: center;
}
.scroll-drag-guide__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 32px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
min-width: 220px;
--drag-distance: 60px;
--drag-duration: 2.4s;
}
.scroll-drag-guide__tail {
display: flex;
flex-direction: column;
align-items: center;
}
.scroll-drag-guide__tail .tail {
position: relative;
width: 140px;
height: 8px;
background: #dfe4f6;
border-radius: 999px;
overflow: hidden;
}
.scroll-drag-guide__tail .tail::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 64px;
height: 10px;
border-radius: 999px;
background: #112358;
box-shadow: 0 6px 18px rgba(17, 35, 88, 0.35);
animation: scroll-drag-tail var(--drag-duration) ease-in-out infinite;
}
.scroll-drag-guide__tail .tail::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 999px;
background: #a6b2dc;
transform: translate(-50%, -50%);
}
.scroll-drag-guide .hand-icon {
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
position: relative;
animation: scroll-drag-hand var(--drag-duration) ease-in-out infinite;
}
.scroll-drag-guide .hand-icon::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 28px;
height: 28px;
background: url('/wp-content/uploads/2025/11/hand_icon.svg') center/contain no-repeat;
transform: translate(-50%, -50%);
}
@keyframes scroll-drag-tail {
0% {
transform: translate(-50%, -50%) translateX(calc(var(--drag-distance) * -1));
opacity: 0;
}
15% {
opacity: 1;
}
55% {
transform: translate(-50%, -50%) translateX(var(--drag-distance));
opacity: 1;
}
90% {
opacity: 0;
}
100% {
transform: translate(-50%, -50%) translateX(var(--drag-distance));
opacity: 0;
}
}
@keyframes scroll-drag-hand {
0% {
transform: translateX(calc(var(--drag-distance) * -1));
opacity: 0;
}
15% {
opacity: 1;
}
55% {
transform: translateX(var(--drag-distance));
opacity: 1;
}
90% {
opacity: 0;
}
100% {
transform: translateX(var(--drag-distance));
opacity: 0;
}
}
@media (max-width: 768px) {
.scroll-drag-guide__inner {
padding: 14px 20px;
}
.scroll-drag-guide__tail {
font-size: 0.6rem;
letter-spacing: 0.25em;
}
.scroll-drag-guide__tail .tail {
width: 100px;
}
.scroll-drag-guide__labels {
max-width: 120px;
}
.scroll-drag-guide .hand-icon {
width: 32px;
height: 32px;
}
}
/* ============================================
ExperienceHub Main Slider
============================================ */
.ehMainSlider {
position: relative;
padding: 40px 0;
}
.ehMainSliderItem {
position: relative;
margin: 0 10px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ehMainSliderItem::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
transition: background 0.3s ease;
z-index: 5;
pointer-events: none;
}
.ehMainSliderItem:hover::before {
background: rgba(0, 0, 0, 0.2);
}
.ehMainSliderItem:hover {
transform: translateY(0px);
}
.ehMainSliderItem img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
.ehMainSliderItemContents {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 20px;
color: white;
z-index: 10;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ehMainSliderItemContentStatus {
background-color: rgba(23, 23, 23, 0.44);
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
padding: 0.375rem 0.75rem;
border-radius: 50px;
color: #fff;
opacity: 0;
transform: translateY(0px);
transition: opacity 0.3s ease, transform 0.3s ease;
white-space: nowrap;
}
.ehMainSliderItem:hover .ehMainSliderItemContentStatus {
opacity: 1;
transform: translateY(0);
}
.ehMainSliderItemContentStatus.active {
background: #6287e6;
}
.ehMainSliderItemContentTitle {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
}
.ehMainSliderItemContentBtn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0.5rem 2rem;
margin-top: 8px;
background: none;
border: #fff 2px solid;
border-radius: 100px;
color: white;
white-space: nowrap;
font-size: 1.25rem;
font-weight: 500;
cursor: pointer;
opacity: 0;
transform: translateY(0px);
transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
visibility: hidden;
}
.ehMainSliderItemContentBtn.active {
visibility: visible;
}
.ehMainSliderItem:hover .ehMainSliderItemContentBtn.active {
opacity: 1;
transform: translateY(0);
}
.ehMainSliderItemContentBtn.active:hover {
background:#6287e6;
border-color: #6287e6;
}
.ehMainSliderItemContentBtn svg {
width: 20px;
height: 20px;
}
/* Slick Arrow Styles */
.ehMainSlider .slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
width: 2.5rem;
height: 2.5rem;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
border:none;
cursor: pointer;
transition: all 0.3s ease;
display: flex !important;
align-items: center;
justify-content: center;
}
.ehMainSlider .slick-arrow:hover {
background: rgba(0, 0, 0, 0.2);
}
.ehMainSlider .slick-prev {
left: -50px;
}
.ehMainSlider .slick-next {
right: -50px;
}
.ehMainSlider .slick-arrow img {
width: 40px;
height: 40px;
}
/* Responsive */
@media (max-width: 1200px) {
.ehMainSlider .slick-prev {
left: 5px;
}
.ehMainSlider .slick-next {
right: 5px;
}
}
@media (max-width: 768px) {
.ehMainSliderItemContentTitle {
font-size: 16px;
}
.ehMainSliderItemContentBtn {
padding: 8px 16px;
font-size: 13px;
}
.ehMainSlider .slick-arrow {
width: 40px;
height: 40px;
}
.ehMainSlider .slick-arrow img {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.ehMainSliderItem {
margin: 0 5px;
}
.ehMainSliderItemContents {
padding: 15px;
}
.ehMainSliderItemContentTitle {
font-size: 14px;
}
}
/* ==========================================
ExperienceHub Modal Styles
========================================== */
.ExpHubModal.c-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
}
.ExpHubModal.c-modal.is-active {
display: flex;
}
.ExpHubModal .c-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.ExpHubModal .c-modal__dialog {
position: relative;
background: #0D1B4C;
border-radius: 8px;
max-width: 90%;
max-height: 90vh;
z-index: 10000;
display: flex;
flex-direction: column;
animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.ExpHubModal .mapModalWrap {
width: 480px;
max-width: 90%;
}
.ExpHubModal .c-modal__close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border: none;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
z-index: 10001;
transition: background 0.3s ease;
}
.ExpHubModal .c-modal__close:hover {
background: rgba(0, 0, 0, 0.8);
}
.ExpHubModal .c-modal__close svg {
width: 20px;
height: 20px;
}
.ExpHubModal .c-modal__body {
padding: 16px 20px 0 20px;
overflow-y: auto;
}
.ExpHubModal .c-modal__body--scroll {
max-height: calc(90vh - 140px);
}
.ExpHubModal .mapModalContents {
text-align: center;
}
.ExpHubModal .mapModalContentsTitle {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
margin: 5px 0 15px 0;
color: #fff;
}
.ExpHubModal .mapModalContentsTitle em {
font-style: normal;
font-weight: 400;
font-size: 1rem;
margin-bottom: 10px;
}
.ExpHubModal .mapModalContentsImgWrap {
width: 100%;
margin: 0 auto;
}
.ExpHubModal .mapModalContentsImgWrap img {
width: 100%;
height: auto;
display: block;
}
.ExpHubModal .c-modal__footer {
padding: 20px 40px;
}
.ExpHubModal .slideMapBtnWrap {
display: flex;
justify-content: center;
}
.ehButton {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 2rem;
background: none;
color: #fff;
border: #fff 2px solid;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}
.ehButton:hover {
background: #6287e6;
border:#6287e6 2px solid;
}
@media (max-width: 768px) {
.mapModalWrap {
width: 95%;
}
.ExpHubModal .c-modal__body {
padding: 16px 20px;
}
.ExpHubModal .c-modal__footer {
padding: 15px 20px;
}
.ExpHubModal .mapModalContentsTitle {
font-size: 1rem;
}
.ExpHubModal .mapModalContentsTitle em {
font-size: 0.85rem;
}
.ehButton {
font-size: 14px;
padding: 10px 20px;
}
}
/* ==========================================
Location Buttons Styles
========================================== */
.location_btn_list {
display: flex;
gap: 5px;
align-items: center;
flex-wrap: wrap;
}
.location_btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
cursor: pointer;
border: none;
background: none;
}
.location_btn.google {
height: 57px;
border-radius: 10px;
border: #eee 1px solid;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: #fff;
color:#111;
}
.location_btn.google:hover {
background: #f4f4f4;
}
.location_btn.print {
height: 57px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #152458;
}
.location_btn.print:hover {
background: #4B7DBC;
}
.location_btn.print img {
width: 20px;
height: 20px;
margin-left: 4px;
}
.peNone {
pointer-events: none;
}
.disNone {
display: none !important;
}
.members-access-error {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
background: #fff;
z-index: 999;
color: #fff;
}
.commonBtn25 {
display: flex;
height: 3.25rem;
padding: 0 1rem;
justify-content: center;
align-items: center;
border-radius: .5rem;
background: #0D1B4C;
color: #fff;
font-size: 1.125rem;
border: none;
cursor: pointer;
}
.commonBtn25.disabled {
pointer-events: none;
background: rgba(13, 27, 76, 0.20);
}
.commonBtn25Gray {
background: #E9E9E9;
color: #4E4E4E;
}
@media (hover: hover) and (pointer: fine) {
.commonBtn25Gray:hover {
border-radius: 8px;
background: #d1d1d1;
}
}
.loginBtnSt {
color: rgba(17,17,17,0.5);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.28px;
border: none;
background: none;
text-decoration: none;
cursor: pointer;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:0 5px;
overflow: hidden;
max-width: 185px;
}
.loginBtnSt span {
flex: 1;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
width: 100%;
overflow: hidden;
}
.loginBtnStIcon {
height: fit-content;
margin-top: 5px;
}
.loginBtnStIcon svg {
width: 13px;
fill: #11111180;
color: #11111180;
}
.twMemberWrap {
position: relative;
}
.twMemberWrap .mem-list {
position:absolute;
top:28px;
left:50%;
transform:translateX(-50%);
text-align:center;
padding:5px 20px;
box-sizing:border-box;
background:var(--white);
border-radius:3px;
opacity:0;
visibility:hidden;
margin-top:15px;
transition:all .15s ease-in;
cursor:pointer;
box-shadow:0 0 20px rgba(34,34,34,.1);
background-color: #fff;
/* opacity:1;
visibility:visible;
margin-top:0;
transition:all .15s ease-in; */
}
.twMemberWrap:hover .mem-list {
opacity:1;
visibility:visible;
margin-top:0;
transition:all .15s ease-in;
}
.twMemberWrap .mem-list a {
font-size: 0.8888rem;
font-weight: 400;
line-height:175% !important;
white-space:nowrap;
display: flex !important;
gap: .3rem;
align-items: center;
color: rgba(17,17,17,0.5);
}
.twMemberWrap .mem-list a svg {
width: 1rem;
height: 1rem;
}
.dfCursor {
cursor: default;
}
.cvx-marquee {
overflow: hidden;
width: 100%;
/* 마스크 그라디언트 */
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 8%,
black 92%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
black 8%,
black 92%,
transparent 100%
);
}
.cvx-marquee-track {
display: flex;
width: max-content;
animation: cvx-marquee-scroll var(--speed) linear infinite;
gap: var(--gap);
will-change: transform;
}
.cvx-marquee-item {
flex: 0 0 auto;
}
.cvx-marquee img {
height: var(--height);
width: auto;
display: block;
}
@keyframes cvx-marquee-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (max-width: 880px) {
.location_btn.print{
display:none;
}
a.location_btn{
width: 100% !important;
}
}
@media (max-width: 800px) {
.cvx-marquee-track {
animation: cvx-marquee-scroll var(--speed) linear infinite;
gap: var(--m_gap);
}
.cvx-marquee img {
height: var(--m_height);
}
}
@media (max-width: 768px) {
.location_btn_list {
flex-direction: column;
gap: 12px;
width: 100%;
}
.location_btn {
width: 100%;
justify-content: center;
font-size: 14px;
padding: 10px 20px;
}
}