/* ========================================================= LAYOUT ========================================================= */:root { --page-pad: 5vw; --page-pad2: 20vw; --ref-bg: #f4f4f4; --ref-text: #111; --ref-muted: #6b7280; --ref-blue: #3f4296; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 16px; --shadow-sm: 0 10px 20px rgba(0,0,0,.08); --shadow-md: 0 18px 50px rgba(0,0,0,.18); --shadow-lg: 0 30px 80px rgba(0,0,0,.25); --ease: .25s ease; } /* content width: 100% + padding L/R 5% */ .color_ksys { color: #3f4296 !important; } .sec_inner { width: 100%; margin: 0 auto; padding: 0 var(--page-pad); box-sizing: border-box; } .sec_inner2 { width: 100%; margin: 0 auto; padding: 0 200px; box-sizing: border-box; } .sec_inner3 { width: 1200px; margin: 0 auto; padding: 0; box-sizing: border-box; } .sec_inner4 { width: 100%; max-width: 1800px; margin: 0 auto; padding: 0 5%; box-sizing: border-box; } .sec_in { max-width: 1400px; width: 100%; margin: 0 auto; } /* ========================================================= TYPOGRAPHY SYSTEM - Titles / Text utilities ========================================================= */ .sec_tit { font-size: 18px; font-weight: 400; line-height: 1.4; color: #222; word-break: keep-all; } .sec_tit b { font-weight: 600; } .sec_tit2 { font-size: 20px; font-weight: 400; line-height: 1.4; color: #222; word-break: keep-all; } .sec_tit2 b { font-weight: 600; } .sec_tit3 { font-size: 24px; font-weight: 400; line-height: 1.4; color: #222; word-break: keep-all; } .sec_tit3 b { font-weight: 600; } .sec_tit4 { font-size: 30px; font-weight: 400; line-height: 1.3; color: #222; word-break: keep-all; } .sec_tit4 b { font-weight: 600; } .sec_tit5 { font-size: 36px; font-weight: 400; line-height: 1.3; color: #222; word-break: keep-all; } .sec_tit5 b { font-weight: 600; } .sec_tit6 { font-size: 42px; font-weight: 400; line-height: 1.2; color: #222; word-break: keep-all; } .sec_tit6 b { font-weight: 600; } .sec_tit7 { font-size: 48px; font-weight: 400; line-height: 1.4; color: #222; word-break: keep-all; } .sec_tit7 b { font-weight: 600; } .sec_tit8 { font-size: 60px; font-weight: 200; line-height: 1.2; color: #222; word-break: keep-all; } .sec_tit8 b { font-weight: 700; } .sec_tit9 { font-size: 70px; font-weight: 200; line-height: 1.2; color: #222; word-break: keep-all; } .sec_tit9 b { font-weight: 700; } .sec_tit10 { font-size: 90px; font-weight: 200; line-height: 1; color: #222; word-break: keep-all; } .sec_tit10 b { font-weight: 700; } .sec_tit11 { font-size: 120px; font-weight: 200; line-height: 1; color: #222; word-break: keep-all; } .sec_tit11 b { font-weight: 700; } .sec_txt { font-size: 16px; font-weight: 300; line-height: 1.4; color: #222; word-break: keep-all; } .sec_txt b { font-weight: 500; } .sec_txt2 { font-size: 18px; font-weight: 300; line-height: 1.4; color: #222; word-break: keep-all; } .sec_txt2 b { font-weight: 500; } .sec_txt3 { font-size: 24px; font-weight: 300; line-height: 1.4; color: #222; word-break: keep-all; } .sec_txt3 b { font-weight: 500; } .sec_txt4 { font-size: 16px; font-weight: 300; line-height: 1.4; color: #666; word-break: keep-all; } .sec_txt4 b { font-weight: 500; } /* ========================================================= UTILITIES ========================================================= */ .txt_wh { color: #fff!important; } .txt_center { text-align: center; } .txt_left { text-align: left; } .txt_right { text-align: right; } .bbbgap { padding-top: 200px; } .bbgap { padding-top: 150px; } .bgap { padding-top: 100px; } .gap { padding-top: 50px; } .sgap { padding-top: 30px; } .ssgap { padding-top: 20px; } .sssgap { padding-top: 10px; } .ssssgap { padding-top: 5px; } .bold800 { font-weight: 800!important; } .bold700 { font-weight: 700!important; } .bold600 { font-weight: 600!important; } .bold500 { font-weight: 500!important; } .bold400 { font-weight: 400!important; } .bold300 { font-weight: 300!important; } .bold200 { font-weight: 200!important; } /* #toTop { display: none; text-decoration: none; position: fixed; bottom: 100px; right: 5%; overflow: hidden; width: 50px; height: 50px; border: none; text-indent: -999999px; background: url(../images/totop.png); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); opacity: 0.6; z-index: 99999; background-color: #0198db; background-repeat: no-repeat; background-position: center center; border-radius: 100px; } #toTop:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } */ /* ========================================================= LAYOUT ========================================================= */ @media (max-width:1600px) { @_vs_tag_0_:root { --page-pad: 4vw; } } @media (max-width:1400px) { .sec_inner2 { padding: 0 120px; } .sec_inner3 { width: 100%; padding: 0 60px; } } @media (max-width:1200px) { .sec_inner2 { padding: 0 80px; } .sec_inner3 { padding: 0 40px; } .sec_tit8 { font-size: 48px; } .sec_tit9 { font-size: 56px; } .sec_tit10 { font-size: 72px; } .sec_tit11 { font-size: 90px; } } @media (max-width:1024px) { @_vs_tag_0_:root { --page-pad: 5vw; } .sec_inner2 { padding: 0 40px; } .sec_inner3 { padding: 0 30px; } .sec_tit6 { font-size: 36px; } .sec_tit7 { font-size: 40px; } .sec_tit8 { font-size: 42px; } .sec_tit9 { font-size: 48px; } .sec_tit10 { font-size: 60px; } .sec_tit11 { font-size: 70px; } .bbbgap { padding-top: 160px; } .bbgap { padding-top: 120px; } .bgap { padding-top: 80px; } } @media (max-width:768px) { @_vs_tag_0_:root { --page-pad: 6vw; } .sec_inner2 { padding: 0 24px; } .sec_inner3 { padding: 0 24px; } .sec_tit3 { font-size: 20px; } .sec_tit4 { font-size: 20px; } .sec_tit5 { font-size: 28px; } .sec_tit6 { font-size: 30px; } .sec_tit7 { font-size: 34px; } .sec_tit8 { font-size: 36px; } .sec_tit9 { font-size: 40px; } .sec_tit10 { font-size: 48px; } .sec_tit11 { font-size: 56px; } .sec_txt2 { font-size: 16px; } .sec_txt3 { font-size: 18px; } .bbbgap { padding-top: 120px; } .bbgap { padding-top: 90px; } .bgap { padding-top: 60px; } .gap { padding-top: 40px; } } @media (max-width:480px) { @_vs_tag_0_:root { --page-pad: 7vw; } .sec_tit5 { font-size: 24px; } .sec_tit6 { font-size: 26px; } .sec_tit7 { font-size: 28px; } .sec_tit8 { font-size: 30px; } .sec_tit9 { font-size: 34px; } .sec_tit10 { font-size: 40px; } .sec_tit11 { font-size: 46px; } .sec_txt { font-size: 14px; } .sec_txt2 { font-size: 15px; } .sec_txt3 { font-size: 16px; } .bbbgap { padding-top: 100px; } .bbgap { padding-top: 70px; } .bgap { padding-top: 50px; } .gap { padding-top: 30px; } .sgap { padding-top: 20px; } } /* ========================================================= LAYOUT ========================================================= */ /* 설계시뮬레이터*/ .m_menu_wrap .menu_08 span { padding: 0; border-radius: 50px; border: 1px solid transparent; } /* main-visual */ .main_visual { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; } .main_visual_media { position: absolute; inset: 0; } .main_visual_video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .main_visual_overlay { position: absolute; inset: 0; display: flex; align-items: center; } .main_visual_inner { width: 100%; } .main_visual_copy { color: #fff; max-width: 900px; } .main_visual_tit1 { font-size: 56px; font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; } .main_visual_tit2 { font-size: 72px; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; } .main_visual_desc { margin-top: 30px; font-size: 18px; opacity: .85; } .main_visual_ctrl { margin-top: 26px; display: flex; gap: 10px; align-items: center; } .mv_btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.25); color: #fff; cursor: pointer; } .mv_indicators { display: flex; gap: 6px; align-items: center; margin-left: 8px; } .mv_ind { width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.18); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s ease; } .mv_ind:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.65); } .mv_ind.is_on { background: var(--ref-blue); border-color: rgba(255,255,255,.85); } .main_quick_nav { position: fixed; right: 25px; bottom: 84px; z-index: 100; } .main_quick_nav ul { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .q_btn { display: flex; align-items: center; gap: 10px; width: 48px; height: 48px; padding: 0 14px; background: #fff; border-radius: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.15); overflow: hidden; transition: width .35s ease; } .q_btn i { font-size: 20px; color: #555; } .q_btn span { opacity: 0; white-space: nowrap; font-size: 14px; transition: opacity .2s ease; } .q_sns_group { display: grid; height: 48px; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px 14px; background: #fff; border-radius: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); opacity: 0; transform: translateX(20px); transition: opacity .25s ease, transform .35s ease; align-items: center; width: 150px; } .q_sns_group i { font-size: 20px; color: #aaa; } .main_quick_nav:hover .q_btn { width: 150px; } .main_quick_nav:hover .q_btn span { opacity: 1; } .main_quick_nav:hover .q_sns_group { opacity: 1; transform: translateX(0); } .q_chat { background: #3b3fd8; display: none!important; } .q_chat i, .q_chat span { color: #fff; } @media (max-width:1024px) { .main_visual_overlay { align-items: center; text-align: center; } .main_visual_copy { max-width: 100%; padding: 0 5%; margin: 0 auto; } .main_visual_ctrl { justify-content: center; } .main_quick_nav { right: 10px; bottom: 30px; } } @media (max-width:768px) { .main_visual { height: 100svh; } .main_visual_copy { padding: 0 6%; } .main_visual_tit1 { line-height: 1.2; } .main_visual_tit2 { line-height: 1.15; } .main_visual_desc { margin-top: 20px; opacity: .9; } .main_visual_ctrl { margin-top: 18px; gap: 8px; } .mv_btn { width: 38px; height: 38px; } .mv_ind { width: 26px; height: 26px; font-size: 11px; } .main_quick_nav { right: 8px; bottom: 20px; } .q_btn { width: 42px; height: 42px; padding: 0 12px; } .main_quick_nav:hover .q_btn { width: 120px; } .q_sns_group { gap: 8px; padding: 8px 12px; height: 42px; } .main_quick_nav { display: none!important; } @media (max-width:480px) { .main_visual_tit1 { font-size: 22px; } .main_visual_tit2 { font-size: 26px; } .main_visual_desc { font-size: 13px; } .main_visual_ctrl { flex-wrap: wrap; justify-content: center; } .mv_indicators { margin-left: 0; } .main_quick_nav:hover .q_btn { width: 42px; } .q_btn span { display: none; } .q_sns_group { display: none; } } } /* main-visual */ /* story */ .k_stage { height: 150vh; background: #fff; } .k_frame { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; } .k_intro_copy { position: relative; z-index: 1; width: 100%; max-width: 1200px; text-align: center; display: flex; flex-direction: column; gap: 150px; } .k_intro_tit, .k_intro_subtit { font-size: 60px; font-weight: 800; color: #111; line-height: 1.25; } .k_pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 220px; height: 90px; border-radius: 999px; overflow: hidden; z-index: 4; will-change: width, height, border-radius; background: transparent; } .k_pill_bg { position: absolute; inset: 0; background: center/cover no-repeat; background-color: #000; transform: scale(1.02); will-change: transform, opacity; } .k_zoom_bg { position: absolute; inset: 0; z-index: 2; } .k_bg_item { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transform: scale(1.03); transition: opacity .6s ease, transform .8s ease; } .k_bg_item.is_on { opacity: unset !important; } .k_dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; z-index: 3; } .k_copy_wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; } .k_copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 1200px; text-align: center; opacity: 0; transition: none; color: #fff; } .k_copy.is_on { opacity: 1; } .k_kicker { font-size: 40px; font-weight: 700; margin-bottom: 24px; opacity: .92; } .k_badge { display: inline-block; padding: 24px 60px; margin-bottom: 24px; font-size: 60px; font-weight: 800; border-radius: 999px; background: rgba(0,0,0,.8); backdrop-filter: blur(10px); } .k_title { font-size: 40px; font-weight: 700; opacity: .98; } @media (max-width:768px) { .k_intro_tit, .k_intro_subtit { font-size: 22px; } .k_kicker { font-size: 16px; } .k_badge { font-size: 18px; padding: 12px 20px; } .k_title { font-size: 22px; } } /* story */ /* performance card */ .k_stats_sec { padding: 120px 0; background: #f5f6f8; } .k_stats_inner { max-width: 1400px; } .k_stats_head { margin-bottom: 70px; } .k_stats_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .k_stat_card { perspective: 1400px; height: 420px; } .k_card_inner { position: relative; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.22,.61,.36,1); transform-style: preserve-3d; } .k_stat_card:hover .k_card_inner { transform: rotateY(180deg); } .k_card_face { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; backface-visibility: hidden; } .k_card_front { background: #000; } .k_card_back { background: #444294; transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; color: #fff; } .k_stat_bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); transition: transform .8s ease; } .k_stat_overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25)); } .k_stat_content { position: absolute; left: 40px; bottom: 40px; color: #fff; z-index: 2; } .k_stat_label { font-size: 30px; font-weight: 600; margin-bottom: 14px; } .k_stat_desc { font-size: 16px; opacity: .85; } .k_back_inner { text-align: center; } .k_stat_num { font-size: 72px; font-weight: 800; line-height: 1; margin-bottom: 16px; letter-spacing: -0.02em; transition: transform .5s ease, text-shadow .5s ease; } .k_stat_num span { font-size: 22px; margin-left: 6px; opacity: .8; } .k_back_desc { font-size: 18px; opacity: .7; } .k_stat_card:hover .k_stat_bg { transform: scale(1.15); } .k_stat_card:hover .k_stat_num { transform: scale(1.1); text-shadow: 0 0 20px rgba(59,63,216,.4); } @media (max-width:1024px) { .k_stats_grid { grid-template-columns: 1fr; } .k_stat_card { height: 340px; } } @media (max-width:768px) { .k_stat_content { display: none; } .k_stat_card { perspective: none; } .k_card_inner { transform: none !important; } .k_card_front, .k_card_back { position: absolute; inset: 0; transform: none; backface-visibility: visible; } .k_card_back { background: linear-gradient(to top, rgba(68,66,148,.9), rgba(68,66,148,.6)); display: flex; align-items: center; justify-content: center; opacity: 1; z-index: 3; } .k_stat_num { font-size: 48px; } .k_stat_content { left: 24px; bottom: 24px; z-index: 4; } } /* performance card */ /* pdt tab */ .prod_tab_inner.sec_inner { padding: 0 200px; } .prod_tab_sec { width: 100%; padding: 88px 0 90px; overflow: hidden; transition: background-color .6s ease; } .prod_tab_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; min-height: 100vh; } .prod_tab_kicker { color: rgba(255,255,255,.92); font-size: 16px; font-weight: 700; margin-bottom: 18px; } .prod_tab_tit { color: #fff; font-size: 86px; font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; margin: 0 0 18px; } .prod_tab_desc { color: rgba(255,255,255,.86); font-size: 18px; font-weight: 400; line-height: 1.75; margin: 0 0 26px; } .prod_tab_more { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 18px; font-weight: 500; letter-spacing: .02em; opacity: .92; transition: var(--ease); margin-bottom: 56px; } .prod_tab_more i { display: inline-flex; width: 26px; height: 26px; border-radius: 999px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.35); transition: var(--ease); } .prod_tab_more:hover { opacity: 1; transform: translateY(-1px); } .prod_tab_more:hover i { background: rgba(255,255,255,.14); } .prod_tab_nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; } .prod_tab_btn { appearance: none; border: 1px solid rgba(255,255,255,.28); background: transparent; color: rgba(255,255,255,.88); padding: 10px; border-radius: 6px; font-size: 16px; font-weight: 700; cursor: pointer; transition: var(--ease); } .prod_tab_btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.55); color: #fff; } .prod_tab_btn.is_on { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff; } .prod_tab_visual { position: relative; width: 100%; height: 520px; } .prod_tab_shadow { position: absolute; left: 50%; bottom: -10vh; transform: translateX(-50%); width: 30vw; height: 50px; background: rgba(0,0,0,.32); filter: blur(30px); border-radius: 50%; opacity: .75; transform-origin: center; animation: prodShadowFloat 3.8s ease-in-out infinite; } .prod_tab_panel { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s ease; pointer-events: none; } .prod_tab_panel.is_on { opacity: 1; transform: translateY(0); pointer-events: auto; } .prod_tab_left_panels { position: relative; } .prod_tab_left_panel { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .45s ease, transform .55s ease; } .prod_tab_left_panel.is_on { position: relative; opacity: 1; transform: translateY(0); pointer-events: auto; } .prod_tab_item { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 40vw; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 28px 40px rgba(0,0,0,.28)); will-change: transform; animation: prodFloat 3.8s ease-in-out infinite; } .prod_tab_img { width: 100%; height: 100%; } .prod_tab_img img { width: 100%; height: 100%; object-fit: contain; display: block; } .prod_tab_right:hover .prod_tab_item { transform: translateY(-54%) scale(1.01); } @keyframes prodFloat { 0% { transform: translateY(-50%) translateX(0) rotate(-0.6deg); } 50% { transform: translateY(-54%) translateX(-2px) rotate(0.6deg); } 100% { transform: translateY(-50%) translateX(0) rotate(-0.6deg); } } @keyframes prodShadowFloat { 0% { transform: translateX(-50%) scale(0.98); opacity: .70; } 50% { transform: translateX(-50%) scale(1.03); opacity: .80; } 100% { transform: translateX(-50%) scale(0.98); opacity: .70; } } .prod_tab_grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; min-height: 100vh; } .prod_tab_arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.25); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: var(--ease); } .prod_tab_arrow i { font-size: 26px; } .prod_tab_arrow:hover { background: rgba(255,255,255,.12); transform: translateY(-50%) scale(1.06); } .prod_tab_arrow.prev { left: -100px; } .prod_tab_arrow.next { right: -100px; } @media (max-width:1800px) { .prod_tab_inner.sec_inner { padding: 0 5%; } } @media (max-width:1400px) { .prod_tab_item { width: 36vw; right: 0; } .prod_tab_shadow { width: 34vw; } } @media (max-width:1200px) { .prod_tab_tit { font-size: 68px; } .prod_tab_item { width: 520px; right: 0; } .prod_tab_shadow { width: 420px; } } @media (max-width:1024px) { .prod_tab_grid { grid-template-columns: 1fr; min-height: auto; gap: 60px; } .prod_tab_item { position: relative; top: auto; right: auto; transform: none !important; margin: 0 auto; width: 100%; max-width: 520px; animation: none; } .prod_tab_shadow { display: none; } .prod_tab_arrow.prev { left: 20px; } .prod_tab_arrow.next { right: 20px; } } @media (max-width:768px) { .prod_tab_inner.sec_inner { padding: 0 5%; } .prod_tab_tit { font-size: 48px; line-height: 1.1; } .prod_tab_desc { font-size: 15px; } .prod_tab_nav { display: none; } .prod_tab_visual { height: 360px; } } @media (max-width:560px) { .prod_tab_sec { padding: 64px 0 70px; } .prod_tab_tit { font-size: 38px; } .prod_tab_more { margin-bottom: 30px; } .prod_tab_item { max-width: 420px; } .prod_tab_arrow { width: 40px; height: 40px; } .prod_tab_arrow i { font-size: 20px; } } /* pdt tab */ /* reference section */ .ref_sec { width: 100%; background: var(--ref-bg); padding: clamp(80px, 10vw, 150px) 0; } .ref_head { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(24px, 4vw, 40px); margin-bottom: clamp(50px, 6vw, 80px); } .ref_head_left { min-width: 340px; } .ref_kicker { font-size: 16px; font-weight: 700; color: var(--ref-blue); margin-bottom: 10px; } .ref_tit { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--ref-text); } .ref_head_right { flex: 1; display: flex; justify-content: flex-end; } .ref_tabs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .ref_tab { appearance: none; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.55); color: #111; padding: 12px 18px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--ease); user-select: none; white-space: nowrap; } .ref_tab:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .ref_tab.is_on { border-color: transparent; background: var(--ref-blue); color: #fff; } .ref_grid { position: relative; } #refGrid.owl-carousel .owl-stage-outer { padding: 8px 0 18px; } #refGrid.owl-carousel .owl-item { padding: 0 10px; box-sizing: border-box; } #refGrid.owl-carousel .owl-nav { position: absolute; top: -74px; right: var(--page-pad); display: flex; gap: 10px; } #refGrid.owl-carousel .owl-nav button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.75); cursor: pointer; transition: var(--ease); display: flex; align-items: center; justify-content: center; } #refGrid.owl-carousel .owl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } #refGrid.owl-carousel .owl-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(0,0,0,.18); transition: var(--ease); } #refGrid.owl-carousel .owl-dot.active { width: 28px; background: var(--ref-blue); } .ref_card { display: block; text-decoration: none; color: inherit; } .ref_photo { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; background: #ddd; transform: translateZ(0); will-change: transform; transition: transform .35s ease, box-shadow .35s ease; } .ref_photo_bg { position: absolute; inset: 0; background: center/cover no-repeat; transform: scale(1.02); transition: transform .8s ease; } .ref_photo_dim { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100% ); opacity: 1; transition: opacity .35s ease; } .ref_photo_txt { position: absolute; left: clamp(18px, 2vw, 30px); bottom: clamp(24px, 3vw, 40px); color: #fff; z-index: 2; } .ref_tag { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.9); color: #1b1f2a; font-size: 14px; font-weight: 600; margin-bottom: 12px; } .ref_title { font-size: clamp(16px, 1.2vw, 18px); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; margin: 0; } .ref_card:hover .ref_photo { transform: translateY(-6px); } .ref_card:hover .ref_photo_bg { transform: scale(1.07); } .ref_card:hover .ref_photo_dim { opacity: .92; } @media (max-width:1024px) { .ref_head { flex-direction: column; align-items: flex-start; } .ref_head_left { min-width: auto; } .ref_head_right { width: 100%; justify-content: flex-start; } #refGrid.owl-carousel .owl-nav { top: -60px; } .ref_photo { aspect-ratio: 4/5; } } @media (max-width:768px) { .ref_sec { padding: 80px 0; } .ref_head { gap: 24px; margin-bottom: 50px; } .ref_tabs { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; } .ref_tabs::-webkit-scrollbar { display: none; } #refGrid.owl-carousel .owl-nav { display: none; } .ref_photo { aspect-ratio: 4/5; } .ref_photo_txt { left: 18px; bottom: 22px; } .ref_tag { font-size: 13px; } .ref_title { font-size: 16px; } } /* reference section */ /* Media */ .media_sec { width: 100%; background: #fff; padding: 110px 0 120px; overflow: hidden; } .media_head { text-align: center; margin-bottom: 44px; } .media_kicker { font-size: 16px; font-weight: 800; color: var(--ref-blue); margin-bottom: 10px; } .media_tit { font-size: 46px; font-weight: 700; color: #111; letter-spacing: -0.03em; line-height: 1.15; } .media_slider_wrap { position: relative; width: 100%; } #mediaOwl .owl-stage-outer { overflow: visible; } #mediaOwl .owl-stage { display: flex; align-items: center; } .media_card { display: block; text-decoration: none; color: inherit; padding: 0 22px; box-sizing: border-box; } .media_box { position: relative; border-radius: var(--radius-md); overflow: hidden; background: #0b0d12; box-shadow: var(--shadow-md); aspect-ratio: 16/9; } .media_thumb { position: absolute; inset: 0; background: center/cover no-repeat; transform: scale(1.02); filter: saturate(1.02) contrast(1.02); } .media_box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 50%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.50) 100%); pointer-events: none; z-index: 1; } .media_play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 2; } .media_play::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-42%,-50%); width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: .92; } .media_txt { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; padding: 0 0 40px 0; } .media_txt_in { display: inline-block; margin-left: 40px; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.45; text-shadow: 0 10px 22px rgba(0,0,0,.55); } #mediaOwl .owl-item { opacity: .75; transform: scale(.86); transition: transform .45s ease, opacity .45s ease; } #mediaOwl .owl-item.center { opacity: 1; transform: scale(1); } .media_card:hover .media_thumb { transform: scale(1.05); transition: transform .6s ease; } .media_card:hover .media_play { background: rgba(255,255,255,.24); } #mediaOwl .owl-nav { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); pointer-events: none; } #mediaOwl .owl-nav button { position: absolute; width: 56px; height: 56px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border: none; cursor: pointer; pointer-events: auto; transition: var(--ease); } #mediaOwl .owl-nav button:hover { background: rgba(0,0,0,.75); transform: scale(1.05); } #mediaOwl .owl-nav .owl-prev { left: 0; } #mediaOwl .owl-nav .owl-next { right: 0; } #mediaOwl .owl-nav button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform-origin: center; } #mediaOwl .owl-prev::before { transform: translate(-40%,-50%) rotate(-135deg); } #mediaOwl .owl-next::before { transform: translate(-60%,-50%) rotate(45deg); } @media (max-width:1400px) { .media_sec { padding: 90px 0 100px; } .media_tit { font-size: 40px; } .media_card { padding: 0 16px; } } @media (max-width:1200px) { .media_tit { font-size: 36px; } #mediaOwl .owl-item { transform: scale(.9); } #mediaOwl .owl-item.center { transform: scale(1); } } @media (max-width:1024px) { .media_sec { padding: 80px 0 90px; } .media_tit { font-size: 32px; } .media_txt_in { font-size: 18px; margin-left: 28px; } .media_play { width: 54px; height: 54px; } .media_play::before { border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; } #mediaOwl .owl-nav button { width: 48px; height: 48px; } } @media (max-width:768px) { .media_sec { padding: 70px 0 80px; } .media_tit { font-size: 26px; line-height: 1.2; } .media_kicker { font-size: 14px; } .media_card { padding: 0 8px; } #mediaOwl .owl-item { opacity: 1; transform: scale(1); } .media_txt { padding-bottom: 24px; } .media_txt_in { font-size: 16px; margin-left: 20px; } .media_play { width: 48px; height: 48px; } #mediaOwl .owl-nav { display: none; } } @media (max-width:480px) { .media_sec { padding: 60px 0 70px; } .media_tit { font-size: 22px; } .media_txt_in { font-size: 15px; margin-left: 16px; } .media_box { border-radius: 12px; } } /* Media */ /* Partners */ .partner_sec { position: relative; padding: 140px 0; background: #eee; overflow: hidden; } .partner_inner { width: 100%; margin: 0 auto; text-align: center; } .partner_title { font-size: clamp(28px, 3vw, 44px); font-weight: 700; margin-bottom: 80px; } .partner_slider_wrap { display: flex; flex-direction: column; gap: 40px; } .partner_row { position: relative; width: 100%; overflow: hidden; } .partner_track { display: flex; gap: 80px; width: max-content; } .partner_item { flex: 0 0 auto; width: 180px; height: 80px; display: flex; align-items: center; justify-content: center; } .partner_item img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: .7; transition: opacity .3s ease; } .partner_item img:hover { opacity: 1; } .row_left .partner_track { animation: slideLeft 40s linear infinite; } .row_right .partner_track { animation: slideRight 45s linear infinite; } @keyframes slideLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes slideRight { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (max-width:1400px) { .partner_sec { padding: 120px 0; } .partner_title { margin-bottom: 70px; } .partner_track { gap: 60px; } .partner_item { width: 160px; height: 70px; } } @media (max-width:1200px) { .partner_sec { padding: 100px 0; } .partner_title { margin-bottom: 60px; } .partner_track { gap: 50px; } .partner_item { width: 140px; height: 64px; } } @media (max-width:1024px) { .partner_sec { padding: 90px 0; } .partner_slider_wrap { gap: 30px; } .partner_track { gap: 40px; } .partner_item { width: 120px; height: 56px; } .row_left .partner_track { animation-duration: 50s; } .row_right .partner_track { animation-duration: 55s; } } @media (max-width:768px) { .partner_sec { padding: 70px 0; } .partner_title { font-size: 24px; margin-bottom: 40px; } .partner_slider_wrap { gap: 24px; } .partner_track { gap: 30px; } .partner_item { width: 100px; height: 48px; } .row_left .partner_track { animation-duration: 60s; } .row_right .partner_track { animation-duration: 65s; } } @media (max-width:480px) { .partner_sec { padding: 60px 0; } .partner_title { font-size: 20px; } .partner_track { gap: 24px; } .partner_item { width: 80px; height: 40px; } } /* Partners */ /* News */ .news_sec { position: relative; padding: 150px 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)), url('../images/main/news_bg.jpg') center/cover no-repeat; color: #fff; } .news_head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 80px; } .news_kicker { display: block; font-size: 14px; font-weight: 700; color: #6b6bff; margin-bottom: 14px; } .news_tit { font-size: 40px; font-weight: 700; line-height: 1.35; } .news_sns { display:flex; margin-top: 28px; display: flex; gap: 22px; flex-wrap: wrap; } .news_sns_item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,.9); text-decoration: none; } .news_sns_item i { font-size: 18px; } .news_sns_item:hover { color: #fff; } .news_more { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; color: #fff; text-decoration: none; } .news_more i { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); transition: var(--ease); } .news_list { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .news_card { background: #fff; color: #222; padding: 40px; border-radius: var(--radius-lg); text-decoration: none; transition: .35s ease; position: relative; } .news_card.is_active, .news_card:hover { background: var(--ref-blue); color: #fff; transform: translateY(-8px); } .news_badge { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ref-blue); font-size: 15px; margin-bottom: 20px; color: var(--ref-blue); } .news_card:hover .news_badge, .news_card.is_active .news_badge { background: #fff; color: var(--ref-blue); } .news_card_tit { font-size: 24px; font-weight: 600; line-height: 1.4; margin-bottom: 20px; } .news_card_desc { font-size: 16px; line-height: 1.6; opacity: .85; } .news_card_bottom { margin-top: 36px; display: flex; justify-content: space-between; align-items: center; } .news_date { font-size: 14px; opacity: .7; } .news_go { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(6px); transition: .35s ease; } .news_go i { color: var(--ref-blue); font-size: 18px; } .news_card:hover .news_go, .news_card.is_active .news_go { opacity: 1; transform: translateY(0); } @media (max-width:1400px) { .news_sec { padding: 120px 0; } .news_head { margin-bottom: 60px; } .news_tit { font-size: 36px; } } @media (max-width:1200px) { .news_list { grid-template-columns: repeat(2,1fr); } .news_card { padding: 32px; } } @media (max-width:1024px) { .news_sec { padding: 100px 0; } .news_head { flex-direction: column; gap: 30px; } .news_more { align-self: flex-start; } .news_tit { font-size: 34px; } .news_sns { gap: 16px; } } @media (max-width:768px) { .news_sec { padding: 80px 0; } .news_head { margin-bottom: 40px; } .news_tit { font-size: 28px; line-height: 1.3; } .news_card { padding: 26px; } .news_card_tit { font-size: 20px; } .news_card_desc { font-size: 15px; } .news_card_bottom { margin-top: 24px; } .news_go { width: 40px; height: 40px; } } @media (max-width:640px) { .news_list { grid-template-columns: 1fr; } } @media (max-width:480px) { .news_sec { padding: 70px 0; } .news_tit { font-size: 24px; } .news_badge { font-size: 13px; padding: 5px 12px; } .news_card { padding: 22px; } } /* News */ /* contact */ .contact_sec { width: 100%; background: #fff; padding: 150px 0 100px 0; } .contact_grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; } .contact_kicker { font-size: 14px; font-weight: 800; color: var(--ref-blue); margin-bottom: 14px; } .contact_tit { font-size: 44px; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; margin: 0 0 24px; color: #111; } .contact_desc { font-size: 18px; line-height: 1.85; color: #333; margin: 0 0 100px 0; } .contact_desc b { font-weight: 700; } .contact_addr { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .contact_addr_row { display: grid; grid-template-columns: 80px 1fr; gap: 18px; align-items: start; color: #222; } .contact_addr_city { font-size: 16px; font-weight: 700; color: #111; } .contact_addr_txt { font-size: 16px; line-height: 1.7; color: #333; opacity: .9; } .contact_form { width: 100%; } .contact_radio { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; padding: 8px 0 16px; } .c_radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 16px; font-weight: 700; color: #666; } .c_radio input { appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cfcfcf; position: relative; margin: 0; } .c_radio input:checked { border-color: var(--ref-blue); } .c_radio input:checked::after { content: ''; position: absolute; inset: 3px; background: var(--ref-blue); border-radius: 50%; } .c_radio input:checked + span, .c_radio input:checked ~ span { color: #111; } .contact_line { height: 1px; background: #eee; margin: 14px 0 26px; } .contact_fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; } .c_field { display: flex; flex-direction: column; gap: 10px; } .c_field_full { grid-column: 1 / -1; } .c_label { font-size: 18px; font-weight: 600; color: #555; } .c_label b { color: #999; font-weight: 600; } .c_input, .c_textarea { width: 100%; border: none; outline: none; background: #f3f3f3; border-radius: var(--radius-sm); padding: 14px 14px; font-size: 14px; color: #111; box-sizing: border-box; transition: box-shadow .2s ease, background .2s ease; } .c_input { height: 46px; } .c_textarea { min-height: 170px; resize: none; padding: 16px 14px; } .c_input:focus, .c_textarea:focus { background: #f0f0ff; box-shadow: 0 0 0 2px rgba(63,63,216,.18); } .contact_agree { margin-top: 22px; } .c_check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; color: #666; font-size: 16px; font-weight: 500; } .c_check input { display: none; } .c_check_ui { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #cfcfcf; position: relative; flex: 0 0 16px; background: #fff; } .c_check input:checked + .c_check_ui { border-color: var(--ref-blue); background: var(--ref-blue); } .c_check input:checked + .c_check_ui::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); } .c_agree_link { color: #666; text-decoration: none; } .c_agree_link:hover { text-decoration: underline; text-underline-position: under; } .contact_submit { margin-top: 18px; appearance: none; border: none; background: transparent; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; color: #111; font-weight: 500; letter-spacing: .02em; font-size: 18px; padding: 10px 0; } .contact_submit i { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,.22); transition: var(--ease); } .contact_submit:hover i { background: rgba(63,63,216,.10); border-color: rgba(63,63,216,.45); transform: translateX(2px); } .c_modal { position: fixed; inset: 0; z-index: 9999; display: none; } .c_modal.is_on { display: block; } .c_modal_dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); } .c_modal_dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(720px, calc(100% - 40px)); max-height: calc(100vh - 80px); background: #fff; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } .c_modal_head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; } .c_modal_tit { font-size: 18px; font-weight: 800; color: #111; margin: 0; } .c_modal_close { appearance: none; border: 0; background: transparent; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); } .c_modal_close:hover { background: #f5f5f5; } .c_modal_close i { font-size: 22px; color: #111; } .c_modal_body { padding: 18px 20px; overflow: auto; } .c_modal_text { color: #222; font-size: 16px; line-height: 1.7; } .c_modal_text p { margin: 0 0 14px; } .c_modal_text b { font-weight: 700; } .c_modal_foot { padding: 16px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px; } .c_modal_btn { appearance: none; border: 1px solid #ddd; background: #111; color: #fff; font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: 12px; cursor: pointer; } .c_modal_btn:hover { opacity: .92; } .contact_done_modal { position: fixed; inset: 0; z-index: 5000; display: none; } .contact_done_modal.is_show { display: block; } .contact_done_dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); } .contact_done_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 14px; padding: 40px 36px; text-align: center; width: min(360px, 90vw); box-shadow: 0 20px 60px rgba(0,0,0,.25); } .contact_done_icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: #111; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; } .contact_done_tit { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .contact_done_txt { font-size: 14px; color: #555; } .privacy_modal { position: fixed; inset: 0; z-index: 5200; display: none; } .privacy_modal.is_show { display: block; } .privacy_dim { position: absolute; inset: 0; background: rgba(0,0,0,.5); } .privacy_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 92vw); background: #fff; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.3); display: flex; flex-direction: column; } .privacy_head { padding: 20px 24px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; } .privacy_tit { font-size: 18px; font-weight: 700; } .privacy_close { background: none; border: 0; font-size: 22px; cursor: pointer; } .privacy_body { padding: 24px; font-size: 14px; line-height: 1.6; color: #444; } .privacy_body p { margin-bottom: 12px; } .privacy_foot { padding: 16px 24px; border-top: 1px solid #eee; text-align: right; } .privacy_btn { padding: 8px 20px; border-radius: 6px; border: none; background: #111; color: #fff; font-size: 14px; cursor: pointer; } @media (max-width:1400px) { .contact_sec { padding: 120px 0; } .contact_tit { font-size: 40px; } .contact_desc { margin-bottom: 70px; } } @media (max-width:1200px) { .contact_grid { gap: 60px; } .contact_tit { font-size: 38px; } .contact_desc { font-size: 17px; } } @media (max-width:1100px) { .contact_grid { grid-template-columns: 1fr; gap: 54px; } .contact_desc { margin-bottom: 40px; } } @media (max-width:900px) { .contact_sec { padding: 100px 0; } .contact_addr_row { grid-template-columns: 70px 1fr; gap: 14px; } .contact_fields { gap: 18px; } } @media (max-width:768px) { .contact_sec { padding: 80px 0 90px; } .contact_tit { font-size: 32px; line-height: 1.3; } .contact_desc { font-size: 16px; line-height: 1.7; margin-bottom: 30px; } .contact_fields { grid-template-columns: 1fr; } .c_label { font-size: 16px; } .c_input { height: 44px; } .c_textarea { min-height: 150px; } .contact_submit { font-size: 16px; } } @media (max-width:640px) { .contact_tit { font-size: 28px; } .contact_addr_row { grid-template-columns: 1fr; gap: 6px; } .contact_addr_city { font-size: 15px; } .contact_addr_txt { font-size: 15px; } .contact_radio { gap: 16px; } } @media (max-width:480px) { .contact_sec { padding: 70px 0; } .contact_tit { font-size: 24px; } .contact_desc { font-size: 15px; } .c_input,.c_textarea { padding: 12px; } .c_check { font-size: 14px; } .contact_submit { font-size: 15px; } .contact_submit i { width: 22px; height: 22px; } .c_modal_dialog { width: calc(100% - 24px); max-height: calc(100vh - 40px); } .contact_done_box { padding: 30px 24px; } .privacy_box { width: calc(100% - 24px); } } /* contact */ /* sub visual */ .sub_visual_wrap { padding-top: 115px; } .sub_visual { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-xl); background: #000; padding: 150px 0; min-height: 520px; box-sizing: border-box; } .sub_visual_media { position: absolute; inset: 0; } .sub_visual_bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); will-change: transform; } .sub_visual_dim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.18) 0%, rgba(0,0,0,.62) 68%, rgba(0,0,0,.78) 100%), linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.55) 100%); } .sub_visual_overlay { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; } .sub_visual_copy { display: flex; flex-direction: column; align-items: center; color: #fff; max-width: 980px; width: 100%; margin: 0 auto; } .sub_visual_en { font-size: 20px; letter-spacing: .02em; opacity: .95; margin-bottom: 20px; } .sub_visual_tit { color: #fff; text-shadow: 0 12px 30px rgba(0,0,0,.45); } .sub_visual_breadcrumb { margin: 26px auto 0; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-lg); background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); color: rgba(255,255,255,.92); } .sub_bc_item .menu { display: none; } .sub_bc_item .menu.active { display: block; } .sub_bc_item .menu.active span { color: #fff!important; } .sub_bc_item .sub_menu_wrap { display: none; } .sub_bc_item_is_current .menu { display: none; } .sub_bc_item_is_current .sub_menu { display: none; } .sub_bc_item_is_current .menu>a { display: none; } .sub_bc_item_is_current .menu.active { display: block; } .sub_bc_item_is_current .menu.active span { color: #fff!important; } .sub_bc_item_is_current .menu.active .sub_menu_wrap .active { display: block; } .sub_visual_breadcrumb i { font-size: 18px; line-height: 1; opacity: .85; } .sub_bc_item { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .sub_bc_item_is_current { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; opacity: 0.8; } .sub_bc_home { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.95); transition: var(--ease); } .sub_bc_home:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); } .sub_bc_home i { opacity: 1; } @media (max-width:1024px) { .sub_visual { padding: 0; height: 460px; min-height: 0; } .sub_visual_en { font-size: 18px; } .sub_visual_tit.sec_tit7 { font-size: 40px; line-height: 1.25; } .sub_visual_breadcrumb { padding: 12px 18px; gap: 8px; border-radius: var(--radius-md); } .sub_visual_breadcrumb i { font-size: 17px; } .sub_bc_item { font-size: 14px; } .sub_bc_home { width: 32px; height: 32px; } } @media (max-width:640px) { .sub_visual_wrap { padding-top: 115px; } .sub_visual { height: 380px; border-radius: var(--radius-lg); } .sub_visual_en { font-size: 16px; } .sub_visual_tit.sec_tit7 { font-size: 28px; line-height: 1.22; } .sub_visual_breadcrumb { margin-top: 18px; padding: 10px 14px; gap: 6px; } .sub_visual_breadcrumb i { font-size: 16px; } .sub_bc_item { font-size: 12px; } .sub_bc_home { width: 30px; height: 30px; border-radius: var(--radius-md); } } @media (max-width:360px) { .sub_visual { height: 360px; } .sub_visual_tit.sec_tit7 { font-size: 24px; } } /* sub visual */ /* greeting */ .open_stage { height: 220vh; background: #fff; } .open_frame { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #fff; } .open_bg { position: absolute; inset: 0; background: center/cover no-repeat; transform: scale(1.02); will-change: transform; } .open_bg_dim { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: .85; transition: opacity .35s ease; pointer-events: none; } .open_panel { position: absolute; top: 0; height: 100%; width: 50%; background: #fff; z-index: 3; display: flex; align-items: flex-start; justify-content: center; padding-top: 45vh; /* 텍스트 수직 위치 */ will-change: transform; } .open_panel_left { left: 0; } .open_panel_right { right: 0; } .open_panel_txt { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; color: #111; } .open_slit { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 10px; height: 100%; background: transparent; z-index: 4; pointer-events: none; } .open_reveal_copy { position: absolute; left: 50%; top: 50%; width: 100%; padding: 0 10%; z-index: 2; color: #fff; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; display: grid; padding: 10%; } .open_reveal_copy.is_on { opacity: 1; } .open_copy_line { font-size: 60px; font-weight: 300; line-height: 1.25; } .open_copy_accent { color: #33b5ff; } .open_copy_rest { opacity: .92; } .open_copy_small { margin-top: 40px; font-size: 18px; line-height: 1.7; opacity: .85; padding-left: 40vw; } @media (max-width:1400px) { .open_panel_txt { font-size: 40px; } .open_copy_line { font-size: 52px; } } @media (max-width:1200px) { .open_stage { height: 200vh; } .open_panel_txt { font-size: 36px; } .open_copy_line { font-size: 46px; } .open_copy_small { padding-left: 30vw; } } @media (max-width:1024px) { .open_stage { height: 180vh; } .open_panel { padding-top: 40vh; } .open_panel_txt { font-size: 30px; } .open_copy_line { font-size: 38px; } .open_copy_small { padding-left: 0; margin-top: 28px; font-size: 16px; } } @media (max-width:768px) { .open_stage { height: 160vh; } .open_panel { width: 50%; padding-top: 38vh; } .open_panel_txt { font-size: 22px; text-align: center; } .open_copy_line { font-size: 28px; line-height: 1.35; } .open_reveal_copy { padding: 0 8%; } .open_copy_small { font-size: 15px; margin-top: 22px; } } @media (max-width:480px) { .open_stage { height: 150vh; } .open_panel { padding-top: 35vh; } .open_panel_txt { font-size: 18px; } .open_copy_line { font-size: 22px; } .open_copy_small { font-size: 14px; } } .ceo_sec { width: 100%; background: #fff; padding: 90px 0 110px; } .ceo_head { text-align: center; transform: translateY(185px); } .ceo_head_tit { margin: 0; font-size: 64px; font-weight: 900; line-height: 1.02; letter-spacing: -0.02em; color: var(--ref-blue); /* 보라 */ } .ceo_grid { display: grid; grid-template-columns: 520px 1fr; gap: 70px; align-items: end; justify-content: center; max-width: 1240px; margin: 0 auto; } .ceo_photo_box { width: 100%; aspect-ratio: 1 / 1.3; background: #e9e9e9; overflow: hidden; } .ceo_photo { width: 100%; height: 100%; object-fit: cover; display: block; } .ceo_sign { margin-top: 16px; display: flex; align-items: baseline; gap: 10px; color: #666; font-size: 14px; } .ceo_sign_label { opacity: .9; font-size: 18px; } .ceo_sign_name { color: #111; font-size: 18px; font-weight: 800; } .ceo_right { padding: 0 0 30px 0; } .ceo_msg_tit { font-size: 22px; font-weight: 800; line-height: 1.55; letter-spacing: -0.02em; color: #111; margin-bottom: 22px; } .ceo_msg_body { color: #777; font-size: 18px; line-height: 1.9; } .ceo_msg_body p { margin: 0; } .ceo_msg_body p + p { margin-top: 22px; } @media (max-width:1400px) { .ceo_head { transform: translateY(140px); } .ceo_head_tit { font-size: 60px; } } @media (max-width:1200px) { .ceo_head { transform: translateY(100px); } .ceo_head_tit { font-size: 52px; } .ceo_grid { grid-template-columns: 420px 1fr; gap: 48px; } } @media (max-width:1024px) { .ceo_sec { padding: 80px 0 100px; } .ceo_head { transform: translateY(60px); margin-bottom: 40px; } .ceo_head_tit { font-size: 42px; line-height: 1.1; } .ceo_grid { grid-template-columns: 1fr; gap: 40px; max-width: 720px; } .ceo_photo_box { max-width: 480px; margin: 0 auto; } .ceo_right { padding: 0; } } @media (max-width:768px) { .ceo_sec { padding: 70px 0 90px; } .ceo_head { transform: none; margin-bottom: 32px; } .ceo_head_tit { font-size: 36px; } .ceo_msg_tit { font-size: 20px; } .ceo_msg_body { font-size: 15px; line-height: 1.8; } } @media (max-width:480px) { .ceo_head_tit { font-size: 28px; } .ceo_msg_tit { font-size: 18px; } .ceo_msg_body { font-size: 14px; } .ceo_photo_box { max-width: 100%; } } .msg_img_sec { width: 100%; background: #fff; padding-left: calc((100% - 1240px) / 2); padding-bottom: 150px; padding-top: 100px; } .msg_img_grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; } .msg_img_tit { font-size: 34px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; color: #111; margin-bottom: 26px; } .msg_img_desc { font-size: 15px; line-height: 1.9; color: #6f6f6f; letter-spacing: -0.02em; } .msg_img_right { display: flex; gap: 16px; align-items: center; } .msg_img_box { width: 100%; max-width: 520px; aspect-ratio: 16 / 9; overflow: hidden; background: #111; box-shadow: 0 18px 40px rgba(0,0,0,.12); } .msg_img_box img { width: 100%; height: 100%; object-fit: cover; display: block; } .msg_img_box:hover img { transform: scale(1.02); transition: .4s ease; } @media (max-width:1240px) { .msg_img_sec { padding-left: 5%; padding-right: 5%; } .msg_img_grid { grid-template-columns: 1fr; gap: 56px; } .msg_img_right { justify-content: center; } .msg_img_box { max-width: 100%; } } @media (max-width:768px) { .msg_img_sec { padding-top: 80px; padding-bottom: 100px; } .msg_img_tit { font-size: 26px; line-height: 1.4; } .msg_img_desc { font-size: 14px; line-height: 1.8; } .msg_img_right { gap: 20px; } } @media (max-width:560px) { .msg_img_sec { padding-top: 60px; padding-bottom: 90px; padding-left: 5%; padding-right: 5%; } .msg_img_tit { font-size: 22px; } .msg_img_desc { font-size: 13px; } .msg_img_right { flex-direction: column; gap: 18px; } } /* greeting */ /* company overview */ .org_img_sec { padding: 120px 0; background: #fff; } .org_head .org_title { color: var(--ref-text); } .org_head .org_desc { margin-top: 10px; color: var(--ref-muted); } .org_img_wrap { margin-top: 70px; width: 100%; display: flex; justify-content: center; } .org_img { width: min(1200px, 100%); height: auto; display: block; } @media (max-width:1024px) { .org_img_sec { padding: 90px 0; } .org_img_wrap { margin-top: 50px; } } @media (max-width:640px) { .org_img_sec { padding: 70px 0; } .org_img_wrap { margin-top: 40px; } } .loc_sec { padding: 120px 0; background: #efefef; } .loc_head .loc_desc { margin-top: 10px; color: var(--ref-muted); } .loc_tabs { margin-top: 34px; display: inline-flex; gap: 10px; align-items: center; justify-content: center; } .loc_tab { padding: 10px 22px; border-radius: 10px; border: 1px solid rgba(0,0,0,.06); background: #fff; color: #6b7280; font-size: 14px; font-weight: 800; letter-spacing: .03em; cursor: pointer; transition: var(--ease); } .loc_tab:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .loc_tab.is_on { background: var(--ref-blue); color: #fff; border-color: transparent; box-shadow: var(--shadow-md); } .loc_panels { margin-top: 46px; } .loc_panel { display: none; } .loc_panel.is_on { display: block; } .loc_list { width: 100%; max-width: 1400px; margin: 0 auto; display: GRID; flex-direction: column; gap: 18px; grid-template-columns: repeat(2, 1fr); } .loc_card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 22px; display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: center; } .loc_thumb { border-radius: var(--radius-lg); overflow: hidden; background: #cfcfcf; width: 100%; height: 150px; } .loc_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .loc_thumb.is_empty { background: #9b9b9b; } .loc_info { text-align: left; } .loc_name { color: #111; } .loc_txt { margin-top: 10px; color: #6b7280; line-height: 1.7; } .loc_tel { margin-top: 10px; color: #6b7280; font-weight: 600; } @media (max-width:1400px) { .loc_sec { padding: 110px 0; } .loc_list { max-width: 900px; } } @media (max-width:1200px) { .loc_sec { padding: 100px 0; } .loc_card { grid-template-columns: 240px 1fr; gap: 20px; } .loc_thumb { height: 140px; } .loc_list { grid-template-columns: 1fr; } } @media (max-width:1024px) { .loc_sec { padding: 90px 0; } .loc_panels { margin-top: 34px; } .loc_card { grid-template-columns: 200px 1fr; padding: 20px; } .loc_thumb { height: 130px; } } @media (max-width:900px) { .loc_tabs { flex-wrap: wrap; gap: 10px; } } @media (max-width:768px) { .loc_sec { padding: 80px 0; } .loc_card { grid-template-columns: 1fr; gap: 18px; } .loc_thumb { height: 220px; } .loc_info { text-align: left; } } @media (max-width:640px) { .loc_sec { padding: 70px 0; } .loc_tabs { margin-top: 26px; gap: 8px; } .loc_tab { padding: 10px 16px; font-size: 13px; } .loc_list { gap: 14px; } .loc_card { padding: 16px; } .loc_thumb { height: 180px; } } @media (max-width:480px) { .loc_sec { padding: 60px 0; } .loc_thumb { height: 160px; } .loc_name { font-size: 16px; } .loc_txt,.loc_tel { font-size: 14px; } } .loc_thumb { position: relative; overflow: hidden; } .loc_thumb .map_pin { position: absolute; left: 50%; top: 56%; width: 70px; height: 40px; transform: translate(-50%, -100%); background: url('../images/sub/map_pin.svg') no-repeat center / contain; pointer-events: none; z-index: 2; } .loc_thumb .map_pin::after { content: ''; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; background: rgba(0,0,0,.25); filter: blur(6px); transform: translateX(-50%); } .loc_card:hover .map_pin { transform: translate(-50%, -120%) scale(1.05); transition: transform .25s ease; } .loc_card:hover .map_pin { transform: translate(-50%, -120%) scale(1.05); transition: transform .25s ease; } /* company overview */ /* history */ .his_page { position: relative; background: #fff; } .his_tabs_wrap { position: sticky; top: 100px; z-index: 20; background: #fff; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); /* gauge */ overflow: hidden; --fill: 0; position: sticky; } .his_tabs_wrap::after { content: ""; position: absolute; inset: 0; background: #fff; z-index: 0; } .his_tabs_wrap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fill) * 1%); background: linear-gradient(90deg, #5b2fd6 0%, #ff2a8a 100%); z-index: 1; pointer-events: none; } .his_tabs { position: relative; z-index: 2; display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .his_tabs::-webkit-scrollbar { display: none; } .his_tab { flex: 0 0 auto; width: calc(100%/5); height: 70px; border: 0; background: transparent; cursor: pointer; font-size: 18px; font-weight: 800; color: #111; letter-spacing: -0.01em; padding: 0 26px; position: relative; transition: color .25s ease, background .25s ease; } .his_tab span { display: inline-block; opacity: .85; } .his_tab.is_filled { color: #fff; } .his_tab.is_on { color: #fff; background: rgba(0,0,0,.14); } .his_tab.is_on span { opacity: 1; } .his_hero { padding: 220px 0 0; } .his_head .his_kicker { color: var(--ref-blue); font-size: 16px; letter-spacing: .02em; } .his_head .his_title { margin-top: 14px; font-size: 40px; font-weight: 800; line-height: 1.25; color: #111; word-break: keep-all; } .his_stage { margin: 52px auto 0; width: min(1080px, 100%); border-radius: var(--radius-xl); overflow: hidden; background: #ddd; box-shadow: var(--shadow-md); } .his_stage_img { width: 100%; padding-top: 42%; background-size: cover; background-position: center; } .his_centerline { position: absolute; left: 50%; top: var(--lineTop, 0px); bottom: 0; width: 2px; transform: translateX(-50%); pointer-events: none; z-index: 1; } .his_centerline_track { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(0,0,0,.10); } .his_centerline_fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--ref-blue); } .his_centerline_dot { position: absolute; left: 50%; top: 0%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 999px; background: var(--ref-blue); box-shadow: 0 10px 24px rgba(0,0,0,.12); } .his_centerline_dot::before { content: ""; position: absolute; inset: -14px; border-radius: 999px; border: 3px solid rgba(58,80,200,.25); } .his_centerline_dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%,-60%) rotate(45deg); opacity: .95; } .his_body { padding: 150px 0 130px; } .his_body .sec_inner .his_grid { margin-bottom: 150px; } .his_grid { width: min(1400px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 160px; position: relative; } .his_period { color: var(--ref-blue); font-size: 16px; font-weight: 800; letter-spacing: .02em; margin-bottom: 18px; } .his_left_tit { color: #111; line-height: 1.25; } .his_left_img { margin-top: 44px; border-radius: var(--radius-xl); overflow: hidden; background: #d0d0d0; width: 100%; padding-top: 58%; background-size: cover; background-position: center; } .his_year_block + .his_year_block { margin-top: 60px; } .his_year { font-size: 34px; font-weight: 900; color: var(--ref-blue); letter-spacing: -0.02em; } .his_items { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; } .his_item { display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: start; } .his_month { font-size: 16px; font-weight: 900; color: var(--ref-blue); line-height: 1.4; padding-top: 2px; } .his_text { font-size: 18px; font-weight: 500; line-height: 1.65; color: #444; word-break: keep-all; } .his_left { position: relative; } .his_left_in { position: sticky; top: 240px; } .his_centerline { left: 50%; transform: none; margin-left: -1px; will-change: height; backface-visibility: hidden; } @media (max-width:1200px) { .his_grid { gap: 100px; } .his_year { font-size: 28px; } .his_text { font-size: 16px; } } @media (max-width:1024px) { .his_tabs_wrap { top: 80px; } .his_tab { font-size: 16px; padding: 0 18px; } .his_hero { padding: 160px 0 0; } .his_body { padding: 120px 0 100px; } .his_grid { gap: 70px; } } @media (max-width:768px) { .his_tabs_wrap { border-top: 0; border-bottom: 1px solid rgba(0,0,0,.08); } .his_tabs_wrap::before { height: 3px; top: auto; bottom: 0; } .his_tab { width: auto; flex: 1; height: 54px; font-size: 0; padding: 0; } .his_tab span { display: none; } .his_hero { padding: 120px 0 0; } .his_head .his_title { font-size: 28px; } .his_body { padding: 90px 0 80px; } .his_grid { grid-template-columns: 1fr; gap: 40px; } .his_centerline { left: 24px; transform: none; width: 2px; } .his_centerline_dot { width: 28px; height: 28px; } .his_centerline_dot::before { inset: -8px; } .his_left_in { position: relative; top: auto; } .his_left { order: 2; padding-left: 50px; } .his_right { padding-left: 50px; } .his_item { grid-template-columns: 32px 1fr; gap: 14px; } .his_month { font-size: 14px; } .his_text { font-size: 15px; } .his_year { font-size: 24px; } .his_left_img { margin-top: 24px; } } @media (max-width:480px) { .his_centerline { left: 16px; } .his_left, .his_right { padding-left: 36px; } .his_year { font-size: 20px; } .his_text { font-size: 14px; } } /* history */ /* certification */ .cert_page { background: #fff; padding: 140px 0 170px; } .cert_head { margin-bottom: 64px; } .cert_tit { color: #111; } .cert_desc { margin-top: 14px; color: var(--ref-muted); } .cert_tabs { display: flex; gap: 14px; justify-content: center; align-items: center; margin: 0 auto 64px; flex-wrap: wrap; } .cert_tab { appearance: none; border: 1px solid rgba(0,0,0,.12); background: #fff; color: var(--ref-blue); height: 48px; padding: 0 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 900; letter-spacing: .02em; cursor: pointer; transition: var(--ease); } .cert_tab:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .cert_tab.is_on { background: var(--ref-blue); color: #fff; border-color: transparent; box-shadow: var(--shadow-md); } .cert_grid { width: min(1400px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 16px; } .cert_card { display: block; text-decoration: none; color: inherit; } .cert_thumb { background: #efefef; border-radius: var(--radius-lg); overflow: hidden; padding: 36px; box-shadow: 0 10px 26px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; } .cert_thumb_in { width: 100%; aspect-ratio: 3 / 4; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #fff; } .cert_name { margin-top: 22px; text-align: center; font-size: 16px; font-weight: 600; color: #111; letter-spacing: -0.01em; word-break: keep-all; } .cert_card:hover .cert_thumb { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.10); } .cert_grid[hidden] { display: none !important; } @media (max-width:1400px) { .cert_page { padding: 120px 0 150px; } .cert_grid { grid-template-columns: repeat(4,1fr); } } @media (max-width:1200px) { .cert_page { padding: 110px 0 140px; } .cert_grid { grid-template-columns: repeat(3,1fr); gap: 26px 14px; } } @media (max-width:900px) { .cert_tabs { margin-bottom: 48px; } .cert_grid { grid-template-columns: repeat(2,1fr); gap: 22px 12px; } } @media (max-width:640px) { .cert_page { padding: 90px 0 110px; } .cert_thumb { padding: 24px; } .cert_name { font-size: 14px; margin-top: 16px; } } @media (max-width:420px) { .cert_thumb { padding: 18px; } .cert_name { font-size: 13px; } } /* certification */ /* business */ .biz_split_sec { width: 100%; background: #fff; } .biz_split_grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .biz_card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 5%; box-sizing: border-box; } .biz_card_left { background: #4643a8; } .biz_card_right { background: #072f52; } .biz_card_inner { width: 100%; max-width: 760px; display: grid; grid-template-rows: auto 1fr; gap: 0px; align-items: start; } .biz_media { width: 100%; display: flex; justify-content: center; } .biz_media img { width: min(520px, 100%); height: auto; display: block; filter: drop-shadow(0 26px 40px rgba(0,0,0,.22)); transform: translateZ(0); } .biz_copy { color: #fff; } .biz_tit { color: #fff; line-height: 1.15; } .biz_desc { margin-top: 18px; color: rgba(255,255,255,.88); line-height: 1.7; } .biz_btn { margin: 56px auto 0; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 58px; min-width: 320px; padding: 0 30px; border-radius: 999px; text-decoration: none; font-weight: 800; letter-spacing: -0.01em; background: rgba(0,0,0,.28); color: #fff; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; box-shadow: 0 18px 46px rgba(0,0,0,.18); } .biz_btn.is_purple { background: rgba(101, 84, 235, .55); } .biz_btn:hover { transform: translateY(-2px); box-shadow: 0 24px 62px rgba(0,0,0,.26); background: rgba(0,0,0,.34); } .biz_btn.is_purple:hover { background: rgba(101, 84, 235, .68); } .biz_btn_arrow { width: 18px; height: 18px; position: relative; display: inline-block; } .biz_btn_arrow::before { content: ""; position: absolute; top: 50%; left: 2px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); } .biz_card_right::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.10); } @media (max-width:1024px) { .biz_card { padding: 90px 5%; } .biz_card_inner { gap: 44px; } .biz_btn { min-width: 300px; } } @media (max-width:820px) { .biz_split_grid { grid-template-columns: 1fr; min-height: unset; } .biz_card_right::before { display: none; } } @media (max-width:640px) { .biz_card { padding: 72px 5%; } .biz_card_inner { gap: 34px; } .biz_tit.sec_tit7 { font-size: 34px; line-height: 1.18; } .biz_desc { margin-top: 14px; } .biz_btn { margin-top: 34px; min-width: 0; width: 100%; height: 54px; } } @media (max-width:360px) { .biz_tit.sec_tit7 { font-size: 28px; } } /* business */ /* business detail */ .biz_detail_sec { width: 100%; background: #fff; padding: 180px 0 150px; } .biz_detail_head { margin-bottom: 70px; } .biz_detail_kicker { font-size: 16px; font-weight: 800; color: var(--ref-blue); letter-spacing: .02em; } .biz_detail_title { margin-top: 14px; color: #111; } .biz_detail_wrap { width: min(1500px, 100%); margin: 0 auto 100px auto; display: grid; grid-template-columns: 1.08fr .92fr; gap: 44px; align-items: end; position: relative; } .biz_detail_left { position: relative; } .biz_detail_img { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-xl); background: #ddd center/cover no-repeat; box-shadow: var(--shadow-md); overflow: hidden; } .biz_detail_right { position: relative; } .biz_detail_left { overflow: visible; } .biz_point_badge { position: absolute; top: 30%; transform: translate(50%, -50%); z-index: 3; width: 180px; height: 180px; border-radius: 8px; background: var(--ref-blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 50px rgba(0,0,0,.12); } .biz_point_badge_in { color: #fff; font-size: 48px; font-weight: 300; letter-spacing: 1px; transform: translateX(-80px); white-space: nowrap; } .biz_point_badge_in span { color: var(--ref-blue); } .biz_detail_wrap01 .biz_point_badge { right: 0%; } .biz_detail_wrap01 .biz_point_badge_in { transform: translateX(80px); } .biz_detail_wrap02 .biz_point_badge { left: -30%; } .biz_detail_wrap02 .biz_point_badge_in { transform: translateX(-92px); } .biz_detail_wrap03 .biz_point_badge { right: 0%; } .biz_detail_wrap03 .biz_point_badge_in { transform: translateX(87px); } .biz_detail_more { padding: 150px 0 100px; } .biz_detail_more a { padding: 16px 20px; border: 1px solid var(--ref-blue); border-radius: 4px; color: var(--ref-blue); font-size: 20px; transition: 0.5s; } .biz_detail_more a:hover { background: var(--ref-blue); color: #fff; } .biz_detail_more_wrap { display: flex; gap: 20px; align-items: center; justify-content: center; } @media (max-width:1200px) { .biz_point_badge { position: absolute; right: 24px; top: 24px; transform: none; width: 240px; height: 140px; border-radius: 14px; } .biz_point_badge_in { font-size: 38px; } } @media (max-width:768px) { .biz_point_badge { right: 18px; top: 18px; width: 210px; height: 122px; } .biz_point_badge_in { font-size: 34px; } } @media (max-width:640px) { .biz_point_badge { right: 14px; top: 14px; width: 180px; height: 104px; border-radius: 12px; } .biz_point_badge_in { font-size: 30px; } } .biz_detail_card { background: #fff; border-radius: var(--radius-xl); padding: 44px 44px 100px; position: relative; z-index: 1; } .biz_detail_subtit { color: #666; font-size: 18px; letter-spacing: -0.02em; } .biz_detail_h3 { margin-top: 14px; color: #111; } .biz_detail_p { margin-top: 18px; color: #777; line-height: 1.9; } @media (max-width:1200px) { .biz_detail_sec { padding: 100px 0 130px; } .biz_detail_wrap { grid-template-columns: 1fr; gap: 34px; align-items: start; } .biz_detail_right { padding-left: 0; } .biz_point_badge { position: relative; left: 0; top: 0; width: 240px; height: 140px; margin: -22px 0 18px auto; border-radius: 14px; } .biz_detail_card { padding: 40px; } } @media (max-width:768px) { .biz_detail_head { margin-bottom: 46px; } .biz_detail_title.sec_tit7 { font-size: 40px; line-height: 1.2; } .biz_detail_img { border-radius: var(--radius-lg); } .biz_point_badge { width: 210px; height: 120px; margin: -18px 0 16px auto; } .biz_point_badge_in { font-size: 36px; } .biz_detail_card { padding: 30px 26px 32px; } .biz_detail_subtit { font-size: 16px; } } @media (max-width:640px) { .biz_detail_sec { padding: 80px 0 110px; } .biz_detail_title.sec_tit7 { font-size: 30px; } .biz_point_badge { width: 180px; height: 104px; margin: -14px 0 14px auto; } .biz_point_badge_in { font-size: 30px; } .biz_detail_subtit { font-size: 15px; } .biz_detail_h3.sec_tit3 { font-size: 22px; } .biz_detail_p { font-size: 13px; line-height: 1.8; } } /* business detail */ /* business detail */ .ex_hero_sec { width: 100%; background: #fff; padding: 120px 0; } .ex_hero_box { position: relative; width: 100%; border-radius: 22px; overflow: hidden; height: 80vh; box-shadow: var(--shadow-md); background: #2a275a; } .ex_hero_bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 35%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%), radial-gradient(120% 120% at 50% 110%, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #4344a0 0%, #2a275a 100%); } .ex_hero_word { position: absolute; z-index: 2; color: rgba(255,255,255,.95); font-weight: 800; letter-spacing: -0.03em; line-height: 1; text-shadow: 0 20px 40px rgba(0,0,0,.18); user-select: none; pointer-events: none; } .ex_hero_word_top { top: 72px; left: 52%; transform: translateX(-2%); font-size: clamp(52px, 6.5vw, 110px); } .ex_hero_word_bottom { bottom: 72px; left: 84px; font-size: clamp(64px, 7.5vw, 128px); } .ex_hero_product { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; } .ex_hero_product img { width: min(62%, 860px); height: auto; display: block; transform: rotate(-10deg); filter: drop-shadow(0 30px 45px rgba(0,0,0,.28)); animation: floatSoft 6s ease-in-out infinite; } @keyframes floatSoft { 0% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-30px) rotate(-10deg); } 100% { transform: translateY(0) rotate(-10deg); } } @media (max-width:1024px) { .ex_hero_sec { padding: 90px 0; } .ex_hero_box { min-height: 460px; border-radius: 18px; } .ex_hero_word_bottom { left: 44px; bottom: 56px; } .ex_hero_product img { width: min(74%, 760px); transform: rotate(-9deg); } } @media (max-width:768px) { .ex_hero_box { min-height: 420px; border-radius: 16px; } .ex_hero_word_top { top: 44px; left: 50%; transform: translateX(-6%); } .ex_hero_word_bottom { left: 28px; bottom: 44px; } .ex_hero_product img { width: min(86%, 640px); transform: rotate(-8deg); } } @media (max-width:480px) { .ex_hero_sec { padding: 70px 0; } .ex_hero_box { min-height: 360px; border-radius: 14px; } .ex_hero_word_top { top: 32px; } .ex_hero_word_bottom { left: 18px; bottom: 34px; } .ex_hero_product img { width: 92%; transform: rotate(-7deg); } } .cert_icon_sec { width: 100%; background: #fff; padding: 140px 0 160px; } .cert_icon_head { margin-bottom: 70px; } .cert_icon_tit { color: #111; } .cert_icon_desc { margin-top: 14px; color: #666; } .cert_icon_grid { width: min(1200px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 86px 120px; align-items: start; justify-items: center; } .cert_icon_item { text-align: center; } .cert_icon_img { width: 120px; display: grid; place-items: center; margin: 0 auto; } .cert_icon_img img { width: 100%; height: 100%; object-fit: contain; display: block; } .cert_icon_name { margin-top: 18px; font-size: 18px; color: #111; letter-spacing: -0.01em; } .cert_icon_item:hover .cert_icon_img img { transform: translateY(-3px); transition: transform .25s ease; } @media (max-width:1200px) { .cert_icon_grid { gap: 70px 70px; } } @media (max-width:900px) { .cert_icon_sec { padding: 110px 0 130px; } .cert_icon_head { margin-bottom: 50px; } .cert_icon_grid { grid-template-columns: repeat(2, 1fr); gap: 56px 60px; } .cert_icon_img { width: 110px; height: 110px; } .cert_icon_name { font-size: 16px; } } @media (max-width:640px) { .cert_icon_sec { padding: 90px 0 110px; } .cert_icon_head { margin-bottom: 38px; } .cert_icon_tit.sec_tit6 { font-size: 30px; line-height: 1.2; } .cert_icon_grid { grid-template-columns: repeat(2, 1fr); gap: 40px 26px; } .cert_icon_img { width: 96px; height: 96px; } .cert_icon_name { font-size: 14px; margin-top: 14px; } } @media (max-width:360px) { .cert_icon_grid { grid-template-columns: 1fr; } } /* business detail */ /* product */ .proc_cert_sec { width: 100%; background: #fafafa; padding: 160px 0 170px; } .proc_cert_head { margin-bottom: 80px; } .proc_cert_title { color: #111; } .proc_cert_desc { margin-top: 14px; color: #777; } .proc_cert_logo_wrap { display: flex; justify-content: center; align-items: center; gap: 80px; margin-bottom: 70px; } .proc_cert_logo { width: 140px; } .proc_cert_logo img { width: 100%; height: auto; display: block; } .proc_cert_text { text-align: center; color: #555; line-height: 1.9; word-break: keep-all; } @media (max-width:1024px) { .proc_cert_sec { padding: 120px 0 140px; } .proc_cert_logo_wrap { gap: 60px; } } @media (max-width:768px) { .proc_cert_head { margin-bottom: 60px; } .proc_cert_logo_wrap { gap: 40px; margin-bottom: 50px; } .proc_cert_logo { width: 120px; } } @media (max-width:640px) { .proc_cert_sec { padding: 90px 0 110px; } .proc_cert_logo_wrap { flex-direction: column; gap: 26px; } .proc_cert_logo { width: 110px; } .proc_cert_text { font-size: 14px; line-height: 1.8; } } /* product */ .purchase_reason_sec { width: 100%; background: #fff; padding: 150px 0 170px; } .purchase_reason_head { margin-bottom: 80px; } .purchase_reason_title { color: #111; } .purchase_reason_desc { margin-top: 14px; color: #777; } .purchase_reason_list { width: min(1180px, 100%); margin: 0 auto; } .purchase_reason_item { display: grid; grid-template-columns: 170px 1fr; gap: 70px; align-items: center; padding: 46px 0; } .purchase_reason_ico { display: flex; align-items: center; justify-content: center; } .purchase_reason_ico img { width: 110px; height: auto; display: block; filter: none; } .purchase_reason_txt { max-width: 820px; } .purchase_reason_h3 { color: #111; margin-bottom: 14px; } .purchase_reason_p { color: #555; line-height: 1.9; word-break: keep-all; } .purchase_reason_ref { margin-top: 12px; color: var(--ref-blue); line-height: 1.8; word-break: keep-all; } .purchase_reason_divider { width: 100%; height: 1px; background: rgba(0,0,0,.08); } @media (max-width:1024px) { .purchase_reason_sec { padding: 120px 0 140px; } .purchase_reason_item { grid-template-columns: 150px 1fr; gap: 46px; padding: 40px 0; } .purchase_reason_ico img { width: 96px; } } @media (max-width:820px) { .purchase_reason_head { margin-bottom: 60px; } .purchase_reason_item { grid-template-columns: 120px 1fr; gap: 34px; } .purchase_reason_ico img { width: 86px; } } @media (max-width:640px) { .purchase_reason_sec { padding: 90px 0 110px; } .purchase_reason_item { grid-template-columns: 1fr; gap: 18px; padding: 34px 0; text-align: center; } .purchase_reason_txt { max-width: 100%; } .purchase_reason_h3 { margin-bottom: 10px; } .purchase_reason_p { font-size: 14px; line-height: 1.85; } .purchase_reason_ref { font-size: 13px; } } .led_type_sec { width: 100%; background: #fafafa; padding: 150px 0 300px; } .led_type_head { margin-bottom: 90px; } .led_type_title { color: #111; } .led_type_desc { margin-top: 14px; color: #777; } .led_type_diagram { position: relative; width: min(1280px, 100%); height: 560px; margin: 0 auto; } .led_type_center { position: absolute; left: 50%; top: 210px; transform: translate(-50%,-50%); width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; z-index: 3; } .led_type_center_ring { position: absolute; inset: 0; border-radius: 999px; background: var(--ref-blue); } .led_type_center_in { position: relative; width: 170px; height: 170px; border-radius: 999px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; } .led_type_center_en { font-size: 18px; color: var(--ref-blue); letter-spacing: -0.01em; } .led_type_center_kr { font-size: 18px; color: var(--ref-blue); letter-spacing: -0.02em; } .led_type_line { position: absolute; background: transparent; z-index: 1; } .led_type_line_left, .led_type_line_right { top: 210px; height: 0; border-top: 2px dotted rgba(63,66,150,.55); width: 280px; } .led_type_line_left { left: calc(50% - 140px - 280px); } .led_type_line_right { left: calc(50% + 140px); } .led_type_line_down { left: 50%; top: 350px; transform: translateX(-50%); width: 0; height: 150px; border-left: 2px dotted rgba(63,66,150,.55); } .led_type_node { position: absolute; z-index: 2; width: 360px; text-align: center; } .led_type_node_bg { position: absolute; left: 50%; top: -50px; transform: translateX(-50%); width: 260px; height: 260px; border-radius: 999px; background: rgba(63,66,150,.10); z-index: 0; } .led_type_media { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; min-height: 190px; } .led_type_media img { max-width: 100%; height: auto; display: block; filter: none; } .led_type_txt { position: relative; z-index: 1; } .led_type_name { color: #111; } .led_type_sub { margin-top: 10px; color: #777; line-height: 1.7; word-break: keep-all; } .led_type_node_left { left: 0; top: 120px; } .led_type_node_right { right: 0; top: 120px; } .led_type_node_bottom { left: 50%; bottom: -200px; transform: translateX(-50%); width: 420px; } @media (max-width:1200px) { .led_type_diagram { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 46px 26px; padding-top: 10px; } .led_type_center { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; grid-column: 1 / -1; } .led_type_line { display: none; } .led_type_node { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: 100%; } .led_type_node_bottom { grid-column: 1 / -1; width: 100%; } } @media (max-width:768px) { .led_type_sec { padding: 110px 0 130px; } .led_type_head { margin-bottom: 60px; } .led_type_diagram { grid-template-columns: 1fr; gap: 34px; } .led_type_center { width: 240px; height: 240px; } .led_type_center_in { width: 150px; height: 150px; } .led_type_media { min-height: 170px; } .led_type_media img { width: 220px; } .led_type_node_bg { width: 190px; height: 190px; top: 58px; } } @media (max-width:640px) { .led_type_sec { padding: 90px 0 110px; } .led_type_center { width: 220px; height: 220px; } .led_type_center_in { width: 140px; height: 140px; } .led_type_center_en, .led_type_center_kr { font-size: 16px; } .led_type_media img { width: 200px; } .led_type_node_bg { width: 170px; height: 170px; top: 54px; } } @media (max-width:1200px) { .led_type_node { position: relative; width: 100%; min-height: 430px; } .led_type_media { top: 28px; } .led_type_node_bg { top: 86px; } .led_type_txt { margin-top: 370px; } } @media (max-width:640px) { .led_type_node { min-height: 400px; } .led_type_media img { width: 240px; } .led_type_node_bg { width: 220px; height: 220px; } .led_type_txt { margin-top: 340px; } } /* */ /* ci */ .ci_intro_sec { width: 100%; background: #fff; padding: 170px 0 140px; } .ci_intro_head { width: 100%; } .ci_intro_kicker { font-size: 16px; font-weight: 800; color: var(--ref-blue); letter-spacing: .02em; } .ci_intro_title { margin-top: 18px; color: #111; letter-spacing: -0.03em; word-break: keep-all; } .ci_intro_visual { margin-top: 90px; width: 100%; border-radius: 0; overflow: hidden; } .ci_intro_visual img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 0; box-shadow: none; filter: none; } @media (max-width:1400px) { .ci_intro_sec { padding: 150px 0 130px; } .ci_intro_desc { max-width: 880px; } } @media (max-width:1200px) { .ci_intro_sec { padding: 130px 0 120px; } .ci_intro_title.sec_tit7 { font-size: 40px; } .ci_intro_visual { margin-top: 70px; } } @media (max-width:1024px) { .ci_intro_sec { padding: 120px 0 110px; } .ci_intro_title.sec_tit7 { font-size: 38px; } .ci_intro_desc { font-size: 15px; } } @media (max-width:900px) { .ci_intro_desc { max-width: 100%; } } @media (max-width:768px) { .ci_intro_sec { padding: 120px 0 90px; } .ci_intro_title.sec_tit7 { font-size: 32px; } .ci_intro_desc { font-size: 14px; line-height: 1.8; } .ci_intro_visual { margin-top: 46px; } } @media (max-width:480px) { .ci_intro_kicker { font-size: 13px; } .ci_intro_title.sec_tit7 { font-size: 24px; line-height: 1.25; } .ci_intro_desc { font-size: 13px; line-height: 1.7; } .ci_intro_visual { margin-top: 30px; } } .ci_file_sec { padding: 140px 0 170px; background: #fff; } .ci_file_head .sec_txt4 { margin-top: 14px; color: #888; } .ci_file_box { display: flex; align-items: center; margin-top: 54px; background: #f7f7f8; border-radius: 12px; padding: 90px 60px; justify-content: center; } .ci_file_box_in { max-width: 980px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 90px; } .ci_file_box_in img { width: 240px; max-width: 100%; box-shadow: none; } .ci_download_wrap { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 6px; background: #eee; padding: 6px; border-radius: 999px; width: fit-content; margin-left: auto; margin-right: auto; } .ci_download_btn { min-width: 120px; height: 46px; padding: 0 26px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 15px; font-weight: 600; color: #555; background: #fff; transition: 0.5s; } .ci_download_btn:hover { background: var(--ref-blue); color: #fff; } .ci_space_sec {padding: 0;} .ci_space_sec .ci_file_box { padding: 60px; } .ci_space_sec .ci_file_box img {width:500px;} .ci_logo_sec { padding: 140px 0 170px; background: #fff; } .ci_logo_head { width: 100%; } .ci_logo_kicker { font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: #111; } .ci_logo_desc { margin-top: 14px; word-break: keep-all; } .ci_logo_wide { margin-top: 56px; } .ci_logo_wide_img { width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: #ddd center/cover no-repeat; aspect-ratio: 16 / 5; } .ci_logo_grid { margin-top: 56px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; } .ci_logo_img { width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: #ddd center/cover no-repeat; } .ci_logo_item_big .ci_logo_img { aspect-ratio: 1 / 1; margin-top: 200px; } .ci_logo_item_small { display: flex; justify-content: flex-end; } .ci_logo_item_small .ci_logo_img { width: min(420px, 100%); aspect-ratio: 1 / 1; } @media (max-width:1400px) { .ci_file_sec { padding: 120px 0 150px; } .ci_logo_sec { padding: 120px 0 150px; } } @media (max-width:1200px) { .ci_file_box { padding: 70px 40px; } .ci_file_box_in { gap: 60px; } .ci_file_box_in img { width: 200px; } .ci_logo_kicker { font-size: 36px; } .ci_logo_grid { gap: 40px; } .ci_logo_item_big .ci_logo_img { margin-top: 120px; } } @media (max-width:1024px) { .ci_file_sec { padding: 110px 0 130px; } .ci_file_box { padding: 60px 30px; } .ci_file_box_in { flex-direction: column; gap: 40px; } .ci_file_box_in img { width: 180px; } .ci_logo_sec { padding: 110px 0 130px; } .ci_logo_grid { grid-template-columns: 1fr; gap: 40px; } .ci_logo_item_big .ci_logo_img { margin-top: 0; } .ci_logo_item_small { justify-content: center; } } @media (max-width:768px) { .ci_file_sec { padding: 90px 0 100px; } .ci_file_box { padding: 40px 20px; } .ci_download_wrap { flex-wrap: wrap; padding: 8px; } .ci_download_btn { min-width: 100px; height: 42px; font-size: 14px; padding: 0 18px; } .ci_logo_sec { padding: 90px 0 100px; } .ci_logo_kicker { font-size: 28px; } .ci_logo_desc { font-size: 14px; line-height: 1.7; } .ci_logo_wide { margin-top: 40px; } .ci_logo_grid { margin-top: 40px; gap: 30px; } } @media (max-width:480px) { .ci_file_sec { padding: 70px 0 80px; } .ci_file_box { padding: 30px 16px; } .ci_file_box_in img { width: 150px; } .ci_logo_sec { padding: 70px 0 80px; } .ci_logo_kicker { font-size: 22px; } .ci_logo_desc { font-size: 13px; } .ci_logo_wide_img { aspect-ratio: 16 / 7; } } .ci_color_sec { padding: 140px 0 170px; background: #fafafa; } .ci_color_head { margin-bottom: 70px; } .ci_color_tit { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; color: #111; } .ci_color_grid { width: min(1100px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px 64px; } .ci_color_card { display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; } .ci_color_card_offset { margin-top: 100px; } .ci_color_swatches { width: 100%; max-width: 340px; border-radius: 0; overflow: hidden; } .ci_swatch { display: block; width: 100%; height: 54px; background: var(--c); } .ci_color_code { margin-top: 16px; font-size: 18px; font-weight: 500; letter-spacing: 0.02em; color: #111; } @media (max-width:1024px) { .ci_color_sec { padding: 110px 0 140px; } .ci_color_head { margin-bottom: 56px; } .ci_color_tit { font-size: 40px; } .ci_color_grid { gap: 56px 44px; } .ci_color_card_offset { margin-top: 56px; } .ci_swatch { height: 50px; } } @media (max-width:820px) { .ci_color_grid { grid-template-columns: 1fr; gap: 44px; justify-items: center; } .ci_color_card { width: 100%; align-items: center; text-align: center; } .ci_color_swatches { max-width: 420px; } .ci_color_card_offset { margin-top: 0; } } @media (max-width:640px) { .ci_color_sec { padding: 90px 0 120px; } .ci_color_tit { font-size: 30px; } .ci_color_head { margin-bottom: 42px; } .ci_swatch { height: 44px; } .ci_color_code { font-size: 12px; } } /* ci */ /* management */ .kgage { width: 100%; position: relative; height: 450vh; } .orbitWrap { position: sticky; top: 0; width: 100%; height: 100vh; background: #072f52; display: flex; align-items: center; justify-content: center; overflow: hidden; } .orbitWrap.is-final { background: url(../images/sub01/final_txt_bg.jpg) no-repeat center center/cover; } .orbitText { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); width: min(680px, 92%); text-align: center; line-height: 1.2; z-index: 3; display: flex; flex-direction: column; gap: 40px; } .orbitText p { margin: 0; font-weight: 800; font-size: clamp(18px, 2.0vw, 26px); letter-spacing: -0.02em; color: rgba(255,255,255,.22); opacity: .25; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, color .45s ease, font-size .45s ease; } .orbitText p.active { font-size: clamp(20px, 2.2vw, 30px); color: #fff; opacity: 1; transform: translateY(0); } .orbitWrap.is-final .orbitText { opacity: 0; transition: opacity .35s ease; } .rings { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(780px, 72vw); height: auto; aspect-ratio: 1/1; display: block; z-index: 1; opacity: 1; transition: opacity .35s ease; } .orbitWrap.is-final .rings { opacity: 0; } .spin { transform-origin: 50% 50%; animation: spin 24s linear infinite; } @keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } @media (prefers-reduced-motion:reduce) { .spin { animation: none } } .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); width: clamp(220px, 18vw, 280px); aspect-ratio: 1/1; border-radius: 50%; background: #479fe7; display: flex; align-items: center; justify-content: center; z-index: 2; will-change: transform; transition: transform .75s ease; } .core img { display: block; width: clamp(120px, 9vw, 170px); height: auto; transform: translate(10px, -10px); opacity: 1; transition: opacity .35s ease, transform .75s ease; } .orbitWrap.is-final .core { transform: translate(-50%, -50%) scale(3.5); } .orbitWrap.is-final .core img { opacity: 0; transform: translate(10px, -10px) scale(.9); } .finalText { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; } .finalText_in { color: #fff; } .finalText .ft1 { margin: 0; font-weight: 900; letter-spacing: -0.02em; font-size: clamp(24px, 3vw, 44px); } .finalText .ft2 { margin: 14px 0 0; font-weight: 700; letter-spacing: -0.02em; font-size: 32px; line-height: 1.45; opacity: .85; } .orbitWrap.show-finaltext .finalText { opacity: 1; transform: translateY(0); } .nextSection { width: 100%; min-height: 100vh; background: #479fe7; } .nextSection .inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 180px 5% 100px; } .nextSection .inner * { color: #fff; } .valueSec { padding: 0 0 160px; overflow: hidden; } .valueTrack .valueCard { background: #fff; border-radius: 16px; padding: 42px 34px 34px; min-height: 420px; position: relative; box-shadow: 0 10px 0 rgba(0,0,0,0.06); } .valueIcon { position: absolute; top: 26px; right: 26px; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .valueIcon img { width: 80px; height: 80px; display: block; object-fit: cover; } .valueTit { margin: 190px 0 14px; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: #2f9be7; } .valueDesc { margin: 0; font-size: 14px; line-height: 1.7; color: #7a7a7a; word-break: keep-all; } #valueTrack .owl-stage { display: flex; } #valueTrack .owl-item { padding-right: 24px; } #valueTrack .owl-item:last-child { padding-right: 0; } #valueTrack .owl-dots { display: none; } #valueTrack .owl-nav { display: none; } @media (max-width:1400px) { .nextSection .inner { padding: 150px 5% 90px; } } @media (max-width:1200px) { .valueTrack .valueCard { min-height: 380px; } .valueTit { font-size: 28px; margin: 160px 0 12px; } } @media (max-width:1024px) { .nextSection .inner { padding: 120px 5% 80px; } .valueSec { padding: 0 0 120px; } } @media (max-width:768px) { .nextSection { min-height: auto; } .nextSection .inner { padding: 100px 5% 70px; } #valueTrack { display: block !important; } #valueTrack .owl-stage { display: block !important; transform: none !important; width: 100% !important; } #valueTrack .owl-item { width: 100% !important; padding: 0 0 20px !important; } .valueTrack .valueCard { min-height: auto; padding: 32px 24px 28px; } .valueIcon { width: 60px; height: 60px; top: 20px; right: 20px; } .valueIcon img { width: 60px; height: 60px; } .valueTit { margin: 120px 0 10px; font-size: 22px; } .valueDesc { font-size: 13px; line-height: 1.6; } } @media (max-width:480px) { .nextSection .inner { padding: 80px 5% 60px; } .valueTit { margin: 100px 0 8px; font-size: 20px; } .valueDesc { font-size: 12px; } } /* management */ /* =========== location sub_01_08 ============ */ .officeRoute { width: 100%; max-width: 1800px; padding: 90px 5%; box-sizing: border-box; background: #fff; margin: 0 auto; } .officeRoute__head { text-align: center; margin-bottom: 44px; } .officeRoute__title { margin: 0; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: #111; } .officeRoute__sub { margin: 10px 0 0; font-size: 15px; color: #8a8a8a; } .officeRoute__grid { display: grid; grid-template-columns: 380px 1fr; gap: 26px; align-items: stretch; } .officeCategoryTabs { display: flex; gap: 6px; margin-bottom: 14px; } .officeCategoryTab { flex: 1; height: 48px; border-radius: 12px; border: 1px solid #e5e5e5; background: #fff; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #666; cursor: pointer; transition: .2s ease; } .officeCategoryTab:hover { background: #f5f5f5; } .officeCategoryTab.is-active { background: #3f3a8f; border-color: #3f3a8f; color: #fff; } .officeTabs { background: #fff; border: 1px solid #ececec; border-radius: 16px; overflow: hidden; padding: 14px; box-sizing: border-box; } .officeTab { width: 100%; text-align: left; background: transparent; border: 0; border-radius: 12px; padding: 22px 22px; cursor: pointer; transition: background .2s ease, color .2s ease; box-sizing: border-box; } .officeTab + .officeTab { border-top: 1px solid #ededed; } .officeTab:hover { background: #fafafa; } .officeTab__tit { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; letter-spacing: -0.02em; color: #111; } .officeTab__addr { margin-top: 10px; font-size: 16px; line-height: 1.6; color: #666; } .officeTab.is-active { background: #3f3a8f; color: #fff; padding: 26px 24px; margin: 0; } .officeTab.is-active + .officeTab { border-top-color: transparent; } .officeTab.is-active .officeTab__tit { color: #fff; } .officeTab.is-active .officeTab__addr { color: rgba(255,255,255,.88); } .officeTab.is-active:hover { background: #3f3a8f; } .officeMap { border-radius: 16px; overflow: hidden; background: #f4f4f4; min-height: 560px; border: 1px solid #efefef; } .officeMap__frame { width: 100%; height: 100%; border: 0; display: block; background-repeat: no-repeat; background-size: cover; background-position: center; } @media (max-width:1100px) { .officeRoute__grid { grid-template-columns: 1fr; } .officeMap { min-height: 420px; } .officeMap__frame { height: 420px; } } .prd_banners { width: 100%; } .prd_band .sec_inner { display: flex; justify-content: center; } .prd_band { width: 100%; padding: 0; } .prd_band--purple { background: #4a4592; } .prd_band--navy { background: #0f2a4f; } .prd_band--sky { background: #48a9e6; } .prd_row { display: grid; gap: 0px; min-height: 260px; align-items: center; } .prd_row--leftText { grid-template-columns: 1fr 2fr; } .prd_row--rightText { grid-template-columns: 2fr 1fr; } .prd_text { display: flex; flex-direction: column; align-items: center; color: #fff; } .prd_media { flex: 0 0 52%; display: flex; align-items: center; justify-content: center; } .prd_media img { width: 800px; height: auto; display: block; height: 560px; object-fit: contain; } .prd_text { flex: 0 0 48%; color: #fff; text-align: center; } .prd_tit { font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-align: center; } .prd_desc { margin-top: 14px; font-size: 15px; line-height: 1.7; opacity: .88; text-align: center; } .prd_btn { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 20px 28px; border-radius: 999px; background: rgba(10, 25, 55, .55); color: #fff; text-decoration: none; font-size: 18px; font-weight: 700; transition: transform .2s ease, background .2s ease, opacity .2s ease; } .prd_btn:hover { transform: translateY(-1px); background: rgba(10, 25, 55, .72); } .prd_btn.is-light { background: rgba(255,255,255,.18); } .prd_btn.is-light:hover { background: rgba(255,255,255,.26); } @media (max-width:1400px) { .prd_row--leftText, .prd_row--rightText { grid-template-columns: 1fr; text-align: center; } .prd_band {padding: 100px 0;} } @media (max-width:1024px) { .prd_media img { max-width: 600px; } .prd_tit { font-size: 28px; } .prd_desc { font-size: 14px; } } @media (max-width:768px) { .prd_row { grid-template-columns: 1fr; padding: 0 0 80px 0; min-height: auto; } .prd_media { order: 1; } .prd_text { order: 2; margin-top: 20px; } .prd_media img { width: 100%; max-width: 100%; height: 50%; } .prd_tit { font-size: 24px; } .prd_desc { font-size: 14px; } .prd_btn { font-size: 16px; padding: 16px 22px; } } @media (max-width:480px) { .prd_tit { font-size: 21px; } .prd_desc { font-size: 13px; } .prd_btn { justify-content: center; } } /* product led */ /* ============= 레닷 큐브 프로 sub_02_01_01 ======== */ .pd_intro_sec { width: 100%; background: #fff; padding: 250px 0 140px; } .pd_intro_head { width: 100%; } .pd_intro_kicker { font-size: 24px; font-weight: 800; color: var(--ref-blue); letter-spacing: .02em; } .pd_intro_title { margin-top: 18px; color: #111; line-height: 1.45; letter-spacing: -0.03em; word-break: keep-all; } .pd_intro_desc { margin-top: 30px; max-width: 980px; color: #666; line-height: 1.95; word-break: keep-all; } .pd_intro_visual { margin: 90px auto 0 auto; width: 100%; border-radius: 20px; overflow: hidden; height: 600px; max-width: 90%; } .pd_intro_visual img {width: 100%; height: auto; display: block; object-fit: cover; border-radius: 0; box-shadow: none; filter: none; object-position: 50% 50%; height: 600px; } @media (max-width:1024px) { .pd_intro_sec { padding: 120px 0 110px; } .pd_intro_title.sec_tit7 { font-size: 44px; line-height: 1.18; } .pd_intro_desc { margin-top: 24px; } .pd_intro_visual { margin-top: 60px; } } @media (max-width:768px) { .pd_intro_visual { height: 300px; } .pd_intro_visual img {height: 300px; } .pd_intro_title.sec_tit7 { font-size: 36px; } .pd_intro_desc { font-size: 14px; line-height: 1.85; } .pd_intro_visual { margin-top: 46px; } } @media (max-width:640px) { .pd_intro_sec { padding: 120px 0 90px; } .pd_intro_kicker { font-size: 14px; } .pd_intro_title.sec_tit7 { font-size: 28px; line-height: 1.22; } .pd_intro_desc { margin-top: 18px; font-size: 13px; } .pd_intro_visual { margin-top: 34px; } } /* ============= 레닷 큐브 프로 sub_02_01_01 ======== */ /* ========================================================= PRODUCT SPEC TABLE ========================================================= */ .prd_spec_sec { width: 100%; padding: 0 0 120px; background: #fff; } .prd_spec_mid_tit { margin: 0 0 40px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #111; } .prd_spec_table_wrap { width: 100%; overflow-x: auto; } .prd_spec_table { width: 100%; min-width: 1100px; border-collapse: collapse; } .prd_spec_visual { display: flex; justify-content: center; align-items: center; margin: 0 auto; } .prd_spec_visual img { width: 800px; } .prd_spec_table thead th { padding: 18px 12px; font-size: 16px; font-weight: 700; color: #3f4296; border-bottom: 2px solid #3f4296; text-align: center; white-space: nowrap; } .prd_spec_table tbody td { padding: 14px 12px; font-size: 15px; color: #111; border-bottom: 1px solid rgba(0,0,0,.08); text-align: center; vertical-align: middle; } .td_model { text-align: left !important; font-weight: 700; } .td_model .td_model_link::before { content: 'View'; margin-right: 10px; display: none; font-size: 14px; font-weight: 500; color: #fff; background: var(--ref-blue); padding: 6px 10px; border-radius: 4px; } .td_model_link { display: flex; align-items: center; } .td_size, .td_bright { font-weight: 500; color: #333; } .td_certs { text-align: right !important; white-space: nowrap; } .cert_icon { width: 28px; height: 28px; object-fit: contain; display: inline-block; vertical-align: middle; margin-left: 8px; } @media (max-width:1024px) { .prd_spec_mid_tit { font-size: 22px; margin-bottom: 30px; } .cert_icon { width: 24px; height: 24px; margin-left: 6px; } } @media (max-width:640px) { .prd_spec_sec { padding: 60px 0 90px; } .prd_spec_mid_tit { font-size: 20px; } .prd_spec_table thead th { font-size: 14px; padding: 14px 10px; } .prd_spec_table tbody td { font-size: 14px; padding: 12px 10px; } } .detail_view { display: none; padding: 150px 0; flex-direction: column; gap: 40px; justify-content: center; align-items: center; background-color: #fafafa; } .detail_view img { width: 860px; filter: brightness(0); height: 1500px; } .detail_tit1 { font-size: 24px; font-weight: 500; color: var(--ref-blue); text-align: center; } .detail_tit2 { font-size: 48px; font-weight: 800; text-align: center; } /* ========================================================= PRODUCT SPEC TABLE ========================================================= */ /* ==================== 공공조달 우수제품 sub_03_01 ===================== */ .ex_product_all_wrap { width: 100%; max-width: 1920px; margin: 0 auto; padding: 100px 0; } .tab-wrap { display: flex; gap: 10px; max-width: 600px; margin: 0 auto 100px; } .tab-btn { flex: 1; padding: 16px; border-radius: 14px; border: 1px solid #ddd; background: #eee; font-size: 18px; font-weight: 700; cursor: pointer; text-align: center; } .tab-btn.active { background: #4a4290; color: #fff; border: none; } .tab-pane { display: none; } .tab-pane.active { display: block; } .tab-content { padding: 80px 0; } .pdt_tab_con { display: grid; grid-template-columns: 3fr 2fr; gap: 80px; } .pdt_tab_con_img { position: relative; background: #f1f1f1; border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; } .pdt_tab_con_img .owl-stage-outer, .pdt_tab_con_img .owl-stage, .pdt_tab_con_img .owl-item { height: 100%; } .pdt_tab_con_img .item { height: 100%; display: flex; align-items: center; justify-content: center; } .pdt_tab_con_img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .pdt_tab_con_img .owl-nav button { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff !important; box-shadow: 0 4px 10px rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; font-size: 18px; } .pdt_tab_con_img .owl-prev { left: 20px; } .pdt_tab_con_img .owl-next { right: 20px; } .pdt_tab_con_img .owl-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; background: #fff; border-radius: 30px; } .pdt_tab_con_img .owl-dot span { width: 8px; height: 8px; background: #ccc; border-radius: 50%; display: block; } .pdt_tab_con_img .owl-dot.active span { background: var(--ref-blue); } .pdt_tab_con_info { display: flex; flex-direction: column; justify-content: space-between; } .product_sticky_btn_wrap { position: sticky; top: 120px; z-index: 10; display: flex; justify-content: center; gap: 10px; padding: 0; margin: 80px auto; background: transparent; border-radius: 50px; box-shadow: none; width: fit-content; } .product_sticky_btn_wrap .sticky-btn { border: none; background: #f3f3f3; padding: 12px 26px; border-radius: 30px; font-size: 16px; font-weight: 600; cursor: pointer; transition: .25s; } .product_sticky_btn_wrap .sticky-btn:hover { background: #e9e9e9; } .product_sticky_btn_wrap .sticky-btn.active { background: var(--ref-blue); color: #fff; } .product_spec_section {padding: 100px 0 0 0;} .spec-table { width: 100%; font-size: 18px; } .spec-row { display: flex; padding: 6px 0; } .spec-title { width: 220px; font-weight: 600; color: #111; } .spec-desc { flex: 1; line-height: 1.6; color: #555; } .contact-box { display: flex; align-items: center; margin-top: 40px; padding: 0px 20px; background: #f3f3f3; border-radius: 20px; } .contact-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 22px; font-weight: 600; color: #111; padding: 40px 0; text-decoration: none; } .contact-item .arrow { font-size: 24px; color: #4c4aa3; transition: .3s; } .contact-item:hover .arrow { transform: translateX(6px); } .contact-divider { width: 1px; height: 40px; background: #ccc; } .tab_tit { text-align: center; width: 100%; margin-bottom: 60px; padding: 20px 0; border-bottom: 1px solid #eee; color: var(--ref-blue); } .feature_wrap { padding: 50px 0 100px 0; } .feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .feature-card { position: relative; padding: 50px 35px; text-align: center; background: #fff; border-radius: 22px; border: 1px solid #f0f0f0; transition: .35s; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,.08); border-color: #e8e8e8; } .feature-card .icon { width: 72px; height: 72px; margin: 0 auto 24px; border-radius: 50%; background: linear-gradient(135deg,#f4f6ff,#eef1ff); display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--ref-blue); transition: .3s; } .feature-card:hover .icon { background: var(--ref-blue); color: #fff; } .feature-card h4 { font-size: 20px; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.3px; color: #111; } .feature-card p { font-size: 18px; color: #666; } .pdt_tab_spec { padding-bottom: 100px; } .product_detail_section {padding: 100px 0 0 0;} .pdt_tab_detail_view { display: flex; justify-content: center; padding: 0 0; } .pdt_tab_detail_view img { margin: 0 auto; width: 100%; max-width: 850px; } @media (max-width:1920px){ .ex_product_all_wrap {padding: 100px 5%; } } @media (max-width:1400px){ .pdt_tab_con{grid-template-columns:1fr 1fr;gap:60px} .feature-grid{grid-template-columns:repeat(3,1fr)} .pdt_tab_con { grid-template-columns: 1fr; gap: 40px; } } @media (max-width:1024px){ .ex_product_all_wrap{padding:80px 5%} .inno_product_all_wrap{padding:80px 5%} .mas_product_all_wrap{padding:80px 5%} .tab-wrap{margin:0 auto 60px} .pdt_tab_con{grid-template-columns:1fr;gap:50px} .product_sticky_btn_wrap{flex-wrap:wrap} .spec-title{width:180px} .feature-grid{grid-template-columns:repeat(2,1fr)} .contact-box{gap:20px; padding: 0 5%;} } @media (max-width:768px){ .tab-btn{font-size:16px;padding:14px} .spec-table{font-size:16px} .feature-card{padding:30px} .feature-card h4{font-size:18px} .feature-card p { font-size: 16px} .product_sticky_btn_wrap { top: 110px; margin: 50px auto; } .product_sticky_btn_wrap .sticky-btn {font-size: 15px;} .contact-item {font-size: 18px; padding: 5% 0;} } @media (max-width:480px){ .ex_product_all_wrap{padding:40px 5%} .inno_product_all_wrap{padding:60px 5%} .mas_product_all_wrap{padding:60px 5%} .feature-grid{grid-template-columns:1fr} .spec-row{flex-direction:column;gap:4px} .spec-title{width:auto} .contact-item{font-size:14px} } /* ==================== 공공조달 우수제품 sub_03_01 ===================== */ /* ==================== 공공조달 혁신제품 sub_03_02 ===================== */ .inno_product_all_wrap {padding: 100px 0; width: 100%; max-width: 1920px; margin: 0 auto;} .inno_product_all_wrap .tab-wrap {width: 100%; max-width: 600px; } @media (max-width:1920px){ .inno_product_all_wrap {padding: 100px 5%; } } @media (max-width:1024px) { .inno_product_all_wrap { padding: 80px 5%} } @media (max-width:480px) { .inno_product_all_wrap { padding: 40px 5%} } /* ==================== 공공조달 혁신제품 sub_03_02 ===================== */ /* ==================== 공공조달 mas sub_03_03 ===================== */ .mas_product_all_wrap {padding: 100px 0; width: 100%; max-width: 1920px; margin: 0 auto;} .mas_product_all_wrap .tab-wrap {width: 100%; max-width: 900px; } .product_select_section { padding: 0 0; } .product_select_grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 40px; } .product_select_card { display: block; background: #fafafa; border-radius: 20px; overflow: hidden; transition: .3s; text-decoration: none; color: #111; } .product_select_card:hover { transform: translateY(-6px); background: var(--ref-blue);} .product_select_card:hover .product_info * { color: #fff;} .product_img { aspect-ratio: 1/1 ; overflow: hidden; } .product_img img { width: 100%; height: 100%; object-fit: cover; transition: .4s; } .product_select_card:hover img { transform: scale(1.06); } .product_info { padding: 48px; } .product_info h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; } .product_info p { font-size: 18px; color: #666; } @media (max-width:1920px){ .mas_product_all_wrap {padding: 100px 5%; } } @media (max-width:1024px){ .product_select_grid{grid-template-columns:repeat(2,1fr);gap:14px} .product_info{padding:36px} .product_info h3{font-size:22px} .product_info p{font-size:16px} } @media (max-width:640px){ .product_select_grid{grid-template-columns:1fr} .product_info{padding:28px} .product_info h3{font-size:20px} .product_info p{font-size:15px} } @media (max-width:420px){ .product_info{padding:22px} .product_info h3{font-size:18px} .product_info p{font-size:14px} } .sub_03_03_021 .feature-grid, .sub_03_03_023 .feature-grid, .sub_03_03_024 .feature-grid { grid-template-columns: repeat(5,1fr); } @media (max-width:1400px) { .mas_product_all_wrap { padding: 80px 5%} .sub_03_03_021 .feature-grid, .sub_03_03_023 .feature-grid, .sub_03_03_024 .feature-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width:1024px) { .mas_product_all_wrap { padding: 80px 5%} .sub_03_03_021 .feature-grid, .sub_03_03_023 .feature-grid, .sub_03_03_024 .feature-grid { grid-template-columns: repeat(1,1fr); } } @meda (max-width:480px) { .mas_product_all_wrap { padding: 40px 5%} .mas_product_all_wrap .contact-box { flex-direction: column; } .mas_product_all_wrap .contact-divider { width:100%; height: 1px; background: #ddd; } .sub_03_03_021 .feature-grid, .sub_03_03_023 .feature-grid, .sub_03_03_024 .feature-grid { grid-template-columns: repeat(1,1fr); } } /* ==================== 공공조달 mas sub_03_03 ===================== */ /* ==================== product list sub_03_01_01 ===================== */ /* .sub_03 { background: #f1f1f1 } */ .pl_sec { width: 100%; padding: 70px 0 110px; } .pl_top { width: 100%; display: flex; justify-content: center; gap: 34px; margin-bottom: 44px; } .pl_top_tab { appearance: none; border: 0; background: transparent; cursor: pointer; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: rgba(17, 17, 17, 0.45); transition: var(--ease); padding: 10px 6px; } .pl_top_tab:hover { color: rgba(17, 17, 17, 0.75); transform: translateY(-1px); } .pl_top_tab.is_on { color: #111; } .pl_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .pl_card { position: relative; background: #fff; border-radius: var(--radius-xl); padding: 28px 28px 26px; transition: transform 0.28s ease, box-shadow 0.28s ease; overflow: hidden; } .pl_card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12); } .pl_cart { display: none!important; position: absolute; right: 22px; top: 22px; width: 46px; height: 46px; border-radius: 999px; background: var(--ref-blue); display: grid; place-items: center; text-decoration: none; box-shadow: 0 14px 30px rgba(63, 66, 150, 0.28); transition: transform 0.25s ease, filter 0.25s ease; z-index: 3; } .pl_cart:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.05); } .pl_cart i { color: #fff; font-size: 20px; } .pl_cart_ico::before { content: ""; position: absolute; left: 2px; top: 4px; width: 16px; height: 10px; border: 2px solid #fff; border-radius: 3px; } .pl_cart_ico::after { content: ""; position: absolute; left: 5px; bottom: 2px; width: 12px; height: 2px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 -8px 0 rgba(255, 255, 255, 0.95); } .sub_03_03_02 .pl_media { padding: 0px; } .sub_03_03_03 .pl_media { padding: 0px; } .sub_03_03_04 .pl_media { padding: 0px; } .sub_03_03_05 .pl_media { padding: 0px; } .pl_media { width: 100%; border-radius: var(--radius-lg); background: #fff; padding: 60px 0px; display: flex; justify-content: center; align-items: center; } .pl_img { width: 100%; max-width: 520px; height: auto; display: block; object-fit: contain; } .pl_body { margin-top: 22px; } .pl_name { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #111; } .pl_desc { margin: 10px 0 0; font-size: 18px; line-height: 1.45; color: #8b8b8b; word-break: keep-all; } .pl_btns { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pl_btn { height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; transition: var(--ease); } .pl_btn--outline { color: var(--ref-blue); border: 1px solid rgba(63, 66, 150, 0.55); background: #fff; } .pl_btn--outline:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .pl_btn--solid { color: #fff; border: 1px solid transparent; background: var(--ref-blue); display: none; } .pl_btn--solid:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 40px rgba(63, 66, 150, 0.22); } @media (max-width:1100px) { .pl_grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width:640px) { .pl_top { gap: 18px; margin-bottom: 28px; } .pl_grid { grid-template-columns: 1fr; gap: 18px; } .pl_card { padding: 22px 18px 20px; } .pl_cart { right: 16px; top: 16px; width: 44px; height: 44px; } .pl_btns { grid-template-columns: 1fr 1fr; } } .pl_sub { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 40px; } .pl_sub_item { height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(15, 35, 65, .18); background: #fff; color: #333; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; transition: .2s ease; } .pl_sub_item:hover { border-color: rgba(15, 35, 65, .35); } .pl_sub_item.is_on { background: var(--ref-blue); border-color: var(--ref-blue); color: #fff; } @media (max-width:640px) { .pl_sub { grid-template-columns: repeat(2, 1fr); } } /* ==================== product list sub_03_01_01 ===================== */ /* ================= factory sub_06_01 =================== */ .sf_sec { padding: 200px 0 110px; } .sf_head { text-align: center; margin-bottom: 34px; } .sf_kicker { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: #3f4296; margin-bottom: 10px; } .sf_tit { font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; color: #111; } .sf_card { position: relative; width: 100%; margin: 0; overflow: hidden; border-radius: 18px; background: #111; } .sf_img { width: 100%; height: 420px; object-fit: cover; display: block; filter: saturate(1.02); } .sf_overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); } .sf_caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; color: #fff; z-index: 2; } .sf_cap1 { font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; opacity: .95; margin: 0 0 10px; } .sf_cap2 { font-size: 48px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; margin: 0; } @media (max-width:1024px) { .sf_sec { padding: 70px 0 90px; } .sf_tit { font-size: 30px; } .sf_img { height: 360px; } .sf_cap1 { font-size: 20px; } .sf_cap2 { font-size: 28px; } } @media (max-width:640px) { .sf_tit { font-size: 26px; } .sf_img { height: 280px; } .sf_cap1 { font-size: 16px; margin-bottom: 8px; } .sf_cap2 { font-size: 22px; } .sf_card { border-radius: 14px; } } /* ================= factory sub_06_01 =================== */ /* ========================================================= SMART FACTORY SECTION ========================================================= */ .factory_sec { width: 100%; background: #fff; padding: 90px 0 110px; } .factory_head { text-align: center; margin-bottom: 46px; } .factory_tit { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; color: var(--ref-text); } .factory_desc { margin-top: 12px; font-size: 18px; line-height: 1.7; color: var(--ref-muted); letter-spacing: -0.02em; } .factory_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 20px; } .factory_card { display: flex; flex-direction: column; } .factory_media { width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: #f2f2f2; box-shadow: var(--shadow-sm); } .factory_media img { width: 100%; height: auto; display: block; } .factory_body { padding-top: 30px; } .factory_card_tit { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.35; color: var(--ref-text); margin: 0 0 10px 0; } .factory_list { margin: 0; padding-left: 18px; list-style: disc; } .factory_list li { font-size: 18px; line-height: 1.85; letter-spacing: -0.02em; color: var(--ref-muted); margin: 0; } @media (max-width:1024px) { .factory_grid { gap: 34px 26px; } .factory_list li { font-size: 16px; } .factory_card_tit { font-size: 20px; } } @media (max-width:768px) { .factory_sec { padding: 0 0 90px; } .factory_tit { font-size: 26px; } .factory_grid { grid-template-columns: 1fr; gap: 28px; } .factory_list li { font-size: 14px; } .factory_card_tit { font-size: 18px; } .factory_list { padding-left: 0; } .factory_desc { font-size: 15px; } } .process_sec { width: 100%; background: #f1f1f1; padding: 150px 0; } .process_head { text-align: center; margin-bottom: 56px; } .process_tit { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; color: var(--ref-text); } .process_desc { margin-top: 12px; font-size: 18px; line-height: 1.7; color: var(--ref-muted); letter-spacing: -0.02em; } .process_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 54px 44px; } .process_item { position: relative; text-align: center; box-sizing: border-box; } .process_thumb { width: 190px; height: 190px; border-radius: 999px; overflow: hidden; margin: 0 auto; background: #f2f2f2; box-shadow: var(--shadow-sm); position: relative; } .process_thumb > img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } .process_no { position: absolute; top: 0px; left: 50%; transform: translateX(56px); width: 46px; height: 46px; border-radius: 999px; background: #3a3693; color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; z-index: 10; } .process_label { margin-top: 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ref-text); } .process_arrow { position: absolute; top: 82px; right: -29px; width: 26px; height: 26px; display: block; } .process_arrow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #2b44d6 0%, #ff2aa1 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .process_item:nth-child(4n) .process_arrow { display: none; } @media (max-width:1100px) { .process_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 34px; } .process_item { padding-right: 40px; } .process_item:nth-child(3n) { padding-right: 0; } .process_item:nth-child(3n) .process_arrow { display: none; } } @media (max-width:768px) { .process_sec { padding: 75px 0 95px; } .process_tit { font-size: 26px; } .process_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; } .process_item { padding-right: 34px; } .process_item:nth-child(2n) { padding-right: 0; } .process_item:nth-child(2n) .process_arrow { display: none; } .process_thumb { width: 150px; height: 150px; } .process_arrow { top: 64px; right: 2px; } .process_desc { font-size: 15px; } .process_label { font-size: 15px; } .process_arrow::before {display: none;} } /* ========================================================= SMART FACTORY SECTION ========================================================= */ /* ========================================================= reference region ========================================================= */ .reference { padding: 100px 0; } .sub_tit_menu { color: var(--ref-blue); } .reference_list_top { display: flex; justify-content: space-between; align-items: center; padding: 40px 0 16px 0; } .count_wrap { display: flex; gap: 8px; align-items: center; } .reference_list_title { width: 100%; border-bottom: 1px solid #ddd; padding: 0 0 20px 0; } .board-search form { display: flex; gap: 10px; align-items: center; } .board-search-select, .board-search-input, .board-search-btn { height: 46px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; } .board-search-select { width: 120px; padding: 0 12px; background: #fff; } .board-search-input { flex: 1; min-width: 0; padding: 0 15px; } .board-search-btn { min-width: 90px; border: 0; background: var(--ref-blue); color: #fff; font-weight: 600; cursor: pointer; transition: 0.2s; } .board-search-btn:hover { background: #444; } /* 지도 영역 */ .branch-inner { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); align-items: center; gap: 60px; } .branch-content { position: relative; } .branch-img { width: 100%; aspect-ratio: 7 / 5; overflow: hidden; border-radius: 20px; position: relative; } .branch-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .branch-img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; background: linear-gradient( to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.0) 100% ); pointer-events: none; border-radius: 20px; } .branch-info { position: absolute; left: 30px; bottom: 40px; } .branch-info * { color: #fff; } /* 지도 */ .map-wrap { width: 100%; max-width: 500px; position: relative; } .map-in svg { width: 100%; height: auto; } .map-wrap path { fill: #eee; transition: 0.3s; cursor: pointer; } .map-wrap path:hover { fill: #cfcfe8; } .map-wrap path.active { fill: #D6D6EA; } /* 지도 버튼 */ .branch-tabs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .branch-btn { position: absolute; padding: 10px 18px; font-size: 16px; border-radius: 30px; border: none; background: #cfd0e7; font-weight: 600; cursor: pointer; transition: .25s; } .branch-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.15); } .branch-btn.active { background: #3f3d97; color: #fff; } .branch-btn::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 40px; background: #8c8cc2; transform: translateX(-50%); } .branch-btn::before { content: ""; position: absolute; left: 50%; top: calc(100% + 40px); width: 10px; height: 10px; background: #4a49a6; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 10px rgba(150,150,200,.35); } /* 버튼 위치 */ /* 부산본사 */ .branch-btn01 { top: 65%; right: 3%; } /* 서울지사 */ .branch-btn02 { top: 9%; left: 26%; } /* 대전지사 */ .branch-btn03 { top: 39%; left: 34%; } /* 광주지사 */ .branch-btn04 { top: 60%; left: 14%; } /* 제주지사 */ .branch-btn05 { top: 85%; left: 3%; } /* 설치사례 */ .reference_list_sec { padding: 80px 0; } .reference_list_wrap { width: 100%; } .reference_group { display: none; grid-template-columns: repeat(3,1fr); gap: 16px; } .reference_group.active { display: grid; } .reference_list { position: relative; } .reference_list_img { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; } .reference_list_img img { width: 100%; display: block; } .reference_list_tit { position: absolute; bottom: 30px; left: 30px; } .reference_list_tit * { color: #fff; } .reference .filter-search-box input { width: 100%; height: 46px; border: none; border-radius: 12px; padding: 0 45px 0 16px; background: #eee; font-size: 14px; } .reference_tabs { width: 100%; border-bottom: 1px solid #ddd; padding: 40px 0; display: flex; gap: 10px; } .reference_tabs .reference-tab { padding: 10px 18px; font-size: 16px; border-radius: 30px; border: none; background: #cfd0e7; font-weight: 600; cursor: pointer; transition: .25s; } .reference_tabs .reference-tab:hover {transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.15); } .reference_tabs .reference-tab.active { background: #3f3d97; color: #fff; } @media (max-width:1400px) { .reference { padding: 100px 5%; } .reference .sec_inner { padding: 0; } } @media (max-width:1280px) { .branch-inner { grid-template-columns: 1fr 1fr; gap: 40px; } .reference_group { grid-template-columns: repeat(2,1fr); } } @media (max-width:1024px) { .reference_sec { margin: 0 0 40px 0; } .map-wrap { display: none; } .branch-tabs { display: none; } .branch-btn { display: none; } .reference_list_sec { padding: 40px 0; } .reference_list_top { flex-direction: column; align-items: flex-start; gap: 20px; } .branch-inner { grid-template-columns: 1fr; gap: 40px; } .map-wrap { max-width: 100%; } .reference_group { grid-template-columns: repeat(2,1fr); } .reference_tabs { display: flex; flex-wrap: wrap; gap: 10px; } } @media (max-width:768px) { .reference { padding: 70px 5%; } .board-search form { flex-direction: column; align-items: stretch; } .board-search-select { width: 100%; } .board-search-btn { width: 100%; } .reference_group { grid-template-columns: 1fr; } .reference_tabs { gap: 8px; } .reference_tabs .reference-tab { font-size: 14px; padding: 8px 14px; } .branch-btn { font-size: 14px; padding: 8px 14px; } } @media (max-width:480px) { .reference { padding: 60px 5%; } .reference_list_tit { left: 20px; bottom: 20px; } .branch-info { left: 20px; bottom: 25px; } } /* ========================================================= reference region ========================================================= */ /* ========================================================= reference product ========================================================= */ .sub_04_02 { background: #f1f1f1; } .reference_product { width: 100%; max-width: 1920px; margin: 0 auto; padding: 100px 5%; } .category-box { margin: 40px auto; padding: 30px; background: #fff; border-radius: 12px; } .category-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px 60px; } .category-grid label { display: flex; align-items: center; gap: 8px; font-size: 18px; cursor: pointer; } .category-grid input { width: 16px; height: 16px; } .reference_product_wrap { width: 100%; } .reference_product_group { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .filter-box { min-width: 320px; max-width: 320px; background: #fff; padding: 20px; border-radius: 14px; } section.reference_product_con_sec { display: flex; gap: 40px; align-items: flex-start; } .filter-search-box { position: relative; } .reference_product .filter-search-box input { width: 100%; height: 46px; border: none; border-radius: 12px; padding: 0 45px 0 16px; background: #fff; font-size: 14px; } .filter-search-box input::placeholder { color: #bbb; } .filter-search-box button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; } .accordion-header { display: flex; justify-content: space-between; padding: 14px 0; font-size: 18px; font-weight: bold; border-bottom: 1px solid #eee; cursor: pointer; } .accordion-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; } .accordion.active .accordion-body { max-height: 500px; padding: 10px 0; } .accordion-body label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 16px; color: #555; cursor: pointer; } .accordion-header span { transition: transform .3s ease; } .accordion.active .accordion-header span { transform: rotate(45deg); } .selected-tags { margin-bottom: 15px; } .tag { display: inline-block; background: var(--ref-blue); color: #fff; padding: 6px 12px; border-radius: 20px; margin: 4px; font-size: 16px; } .tag span { margin-left: 6px; cursor: pointer; } .filter-search-btn-wrap { margin-top: 20px; } .filter-search-btn { width: 100%; height: 48px; border: none; border-radius: 10px; background: var(--ref-blue); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: .2s; } .filter-search-btn:hover { opacity: .9; } @media (max-width:1280px) { .reference_product { padding: 80px 5%; } .category-grid { grid-template-columns: repeat(3,1fr); gap: 16px 30px; } .reference_product_group { grid-template-columns: repeat(2,1fr); } } @media (max-width:1024px) { .reference_product { padding: 80px 5%; } .accordion_all_wrap { width: 100%; } section.reference_product_con_sec { flex-direction: column; gap: 30px; } .filter-box { width: 100%; max-width: 100%; min-width: 100%; } .reference_product_list_sec { width: 100%; } .reference_product_group { grid-template-columns: repeat(2,1fr); } } @media (max-width:768px) { .reference_product { padding: 60px 5%; } .category-box { padding: 20px; } .category-grid { grid-template-columns: repeat(2,1fr); gap: 14px; } .reference_product_group { grid-template-columns: 1fr; } .category-grid label { font-size: 16px; } .accordion-header { font-size: 16px; } .accordion-body label { font-size: 14px; } } @media (max-width:480px) { .category-grid { grid-template-columns: 1fr; } .reference_product { padding: 50px 5%; } } /* ========================================================= reference product ========================================================= */ /* ========================================================= reference view ========================================================= */ .reference_view { padding: 250px 0 100px; } .gallery-section { width: 100%; padding: 40px 0; } .gallery-container { max-width: 1200px; margin: auto; } .gallery-main { width: 100%; margin-bottom: 16px; aspect-ratio: 16/9; overflow: hidden; border-radius: 16px; position: relative; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 1; transition: opacity .35s ease, transform .5s ease; } .gallery-main.change img { opacity: 0; transform: scale(1.05); } .gallery-thumbs { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; } .gallery-thumbs li { width: 100%; cursor: pointer; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; transition: transform .25s ease; } .gallery-thumbs li:hover { transform: translateY(-3px); } .gallery-thumbs img { opacity: 0.5; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: grayscale(100%); transition: filter .3s ease, transform .35s ease; } .gallery-thumbs li.active img { filter: grayscale(0%); transform: scale(1.05); opacity: 1; } .construction-info { padding: 100px 0; font-size: 20px; } .info-container { max-width: 1200px; margin: auto; } .info-title { font-size: 28px; font-weight: 700; padding-bottom: 20px; border-bottom: 1px solid #999; } .info-table li { display: flex; border-bottom: 1px solid #e5e5e5; } .info-item { width: 50%; display: flex; padding: 28px 0; } .label { width: 140px; font-weight: 700; color: #222; } .value { flex: 1; color: #555; } .reference_btns { display: flex; gap: 16px; margin-top: 40px; width: 800px; margin: 0 auto; } .reference_btns a { flex: 1; text-align: center; padding: 16px 20px; border-radius: 6px; font-weight: 600; text-decoration: none; transition: .2s; } .btn_product { background: var(--ref-blue); color: #fff; } .btn_call { border: 1px solid var(--ref-blue); color: var(--ref-blue); } .btn_inquiry { background: #333; color: #fff; } .reference_btns a:hover { transform: translateY(-2px); opacity: .9; } .board_nav_wrap { margin: 0 auto 80px auto; width: 100% ; max-width: 1200px; } .board_nav { display: flex; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .nav_box { width: 50%; padding: 30px; transition: 0.25s; cursor: pointer; } .nav_box:first-child { border-right: 1px solid #eee; } .nav_box:hover { background: #fafafa; } .nav_label { font-size: 15px; color: #999; margin-bottom: 8px; } .nav_title { font-size: 18px; font-weight: 500; color: #222; } .next { text-align: right; } @media (max-width:1400px) { .reference_view_sec { padding: 0 5% ; } .gallery-container, .info-container, .board_nav_wrap { padding: 0 5%; } } @media (max-width:1024px) { .reference_btns { width: 100%; padding: 0 5%; } .info-title { font-size: 24px; } .construction-info { font-size: 18px; } } @media (max-width:768px) { .reference_view { padding: 120px 0 60px; } .gallery-thumbs { flex-wrap: wrap; } .gallery-thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } .construction-info { padding: 60px 0; font-size: 16px; } .info-title { font-size: 22px; } .info-item { width: 100%; padding: 18px 0; border-bottom: 1px solid #e5e5e5; } .info-table li { display: flex; border-bottom: none; flex-direction: column; } .label { width: 110px; font-size: 14px; } .value { font-size: 15px; } .reference_btns { flex-direction: column; gap: 12px; width: 100%; margin-top: 30px; padding: 0 5%; } .reference_btns a { padding: 14px; font-size: 15px; } .board_nav { flex-direction: column; } .nav_box { width: 100%; padding: 20px; } .nav_box:first-child { border-right: none; border-bottom: 1px solid #eee; } .nav_title { font-size: 16px; } .next { text-align: left; } } @media (max-width:480px) { .gallery-main { border-radius: 10px; } .nav_title { font-size: 15px; } .info-title { font-size: 20px; } } /* ========================================================= reference view ========================================================= */