/* ===============================
PTLINK FONT SYSTEM (FINAL)
Single Source of Truth
=============================== */
/* Pretendard Variable is loaded from HTML via pretendardvariable.css */
:root {
--ptlk-font:
"Pretendard", sans-serif;
}
html,
body,
button,
input,
textarea,
select {
font-family: var(--ptlk-font);
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}
/* ===============================
Pretendard Variable (Unified)
=============================== */
/*----------------------------------------------------------------------------------------------------------------------
Project: Preus
Version: 1.0.0
Default Color #000;
Background Color #fff;
Body copy: 'Poppins', sans-serif; 16px;
Headers: 'Poppins', sans-serif;
----------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------
[Table of contents]
A. Basic Styling
-- Styling
B. Helpers
-- animations
-- align
-- borders
-- colors
-- column-count
-- background
-- height
-- margin
-- list
-- no-gutters
-- opacity
-- overflow
-- padding
-- position
-- shadow
-- typography
-- title
-- transitions
-- utilities
-- video-bg
-- width
-- z-index
C. Components
-- block
-- blockquote
-- blog
-- box
-- buttons
-- card
-- circle
-- description-list
-- forms
-- footer
-- gallery
-- hr
-- inputs
-- item
-- list
-- loading-screen
-- map
-- member
-- hero
-- navbar
-- page
-- partners
D. Plugins Styles
-- Magnific Popup
-- Owl Carousel
E. Template Specific Elements
-- Other
----------------------------------------------------------------------------------------------------------------------*/
/***********************************************************************************************************************
/* =========================
PTLINK FONT: Pretendard (Global)
========================= */
:root {
--ptlk-font:
"Pretendard", sans-serif;
}
html,
body {
font-family: var(--ptlk-font);
}
button,
input,
textarea,
select {
font-family: inherit;
}
A. Basic Styling ***********************************************************************************************************************/ /*-------------------------------------------
-- Styling - Colors, Font Size, Font Family
-------------------------------------------*/ /* =========================
PTLINK FONT:
font-size: 1rem;
margin: 0;
padding: 0;
}
html {
font-size: 90%;
}
@media (min-width: 36rem) and (max-width: 47.9375rem) {
html {
font-size: 85%;
}
}
@media (min-width: 48rem) and (max-width: 61.9375rem) {
html {
font-size: 90%;
}
}
@media (min-width: 62rem) and (max-width: 74.9375rem) {
html {
font-size: 95%;
}
}
@media (min-width: 75rem) {
html {
font-size: 100%;
}
}
h1, .ts-h1 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: .5rem;
}
@media (min-width: 48rem) {
h1, .ts-h1 {
font-size: 3rem;
}
}
@media (min-width: 75rem) {
h1, .ts-h1 {
font-size: 4.5rem;
}
}
@media (min-width: 62rem) {
h1, .ts-h1 {
margin-bottom: 1rem;
}
}
h2, .ts-h2 {
font-size: 1.625rem;
font-weight: 300;
}
@media (min-width: 48rem) {
h2, .ts-h2 {
font-size: 1.875rem;
}
}
@media (min-width: 75rem) {
h2, .ts-h2 {
font-size: 2.25rem;
}
}
h3, .ts-h3 {
font-size: 1.5rem;
margin-bottom: 1.5625rem;
}
@media (min-width: 36rem) {
h3, .ts-h3 {
font-size: 1.375rem;
}
}
@media (min-width: 75rem) {
h3, .ts-h3 {
font-size: 1.875rem;
}
}
h4, .ts-h4 {
font-size: 1.25rem;
margin-bottom: 1.875rem;
font-weight: 300;
}
@media (min-width: 48rem) {
h4, .ts-h4 {
font-size: 1.5rem;
}
}
h5, .ts-h5 {
font-size: 1.125rem;
}
@media (min-width: 36rem) {
h5, .ts-h5 {
font-size: 1.25rem;
}
}
h6, .ts-h6 {
font-size: 1rem;
}
/***********************************************************************************************************************
B. Helpers
***********************************************************************************************************************/ /*-------------------------------------------
-- Animations
-------------------------------------------*/ [data-animate] {
opacity: 0;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-timing-function: cubic-bezier(0.67, 0.01, 0.08, 0.99);
animation-timing-function: cubic-bezier(0.67, 0.01, 0.08, 0.99);
}
/* Fade In Up */
/* Fade In Down */
/* Fade In Left */
/* Fade In Right */
/* Zoom In */
/* Zoom Out In */
/* Zoom In Short */
/* Reveal */
[data-animate="ts-reveal"] {
opacity: 1;
}
[data-animate="ts-reveal"].animated .wrapper span {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
[data-animate="ts-reveal"] .wrapper {
display: inline-block;
margin-bottom: -1rem;
overflow: hidden;
}
[data-animate="ts-reveal"] .wrapper span {
display: inline-block;
transition: -webkit-transform 0.8s cubic-bezier(0.67, 0.01, 0.08, 0.99);
transition: transform 0.8s cubic-bezier(0.67, 0.01, 0.08, 0.99);
transition:
transform 0.8s cubic-bezier(0.67, 0.01, 0.08, 0.99),
-webkit-transform 0.8s cubic-bezier(0.67, 0.01, 0.08, 0.99);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
/* -- Align */
/*-------------------------------------------
-- Borders
-------------------------------------------*/
:root {
/* Border radius */
/* Border bottom */
}
/*-------------------------------------------
-- Background
-------------------------------------------*/
.ts-background {
bottom: 0;
left: 0;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: -2;
}
.ts-background .ts-background {
height: 100%;
width: 100%;
}
.ts-background-repeat {
background-repeat: repeat !important;
background-size: inherit !important;
}
.ts-background-repeat .ts-background-image {
background-repeat: repeat;
background-size: inherit;
}
.ts-background-is-dark .form-control {
box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, 0.2);
}
.ts-background-is-dark .form-control:focus {
box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, 0.4);
}
.ts-video-bg {
height: 100%;
}
.ts-video-bg .fluid-width-video-wrapper {
height: 100%;
}
.ts-bg-black {
background-color: #000;
}
/*-------------------------------------------
-- Height
-------------------------------------------*/
.ts-height--100vh {
height: 100vh;
}
/*-------------------------------------------
-- Margin
-------------------------------------------*/
.text-white .list.list-dashed li h4:before {
background-color: #fff;
}
/*-------------------------------------------
-- No Gutters - Removes padding from col*
-------------------------------------------*/
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
/*-------------------------------------------
-- Opacity
-------------------------------------------*/
.ts-opacity__80 {
opacity: 0.8;
}
/*-------------------------------------------
-- Overflow
-------------------------------------------*/
/*-------------------------------------------
-- Padding
-------------------------------------------*/
/*-------------------------------------------
-- Position
-------------------------------------------*/
/* Top */
/* Right */
/* Bottom */
/* Left */
/*-------------------------------------------
-- Shadow
-------------------------------------------*/
:root {
/* Box shadow */
}
/*-------------------------------------------
-- Typography
-------------------------------------------*/
a {
color: #000;
transition: 0.3s ease;
}
a:hover {
color: #000;
text-decoration: none;
}
a.ts-link {
font-weight: 600;
text-decoration: underline;
text-transform: uppercase;
}
p {
line-height: 1.6875rem;
margin-bottom: 1.875rem;
opacity: 0.5;
}
.ts-text-muted---white {
color: rgba(255, 255, 255, 0.6) !important;
}
.ts-text-muted---white a {
color: rgba(255, 255, 255, 0.6) !important;
}
.ts-text-muted---white a:hover {
color: #fff !important;
}
.text-white a:not(.btn) {
color: #fff;
}
.ts-text-black a:not(.btn) {
color: #000 !important;
}
/*-------------------------------------------
-- Title
-------------------------------------------*/
.ts-title {
}
@media (max-width: 35.9375rem) {
.ts-title {
margin-bottom: 2rem;
}
}
@media (min-width: 36rem) and(max-width: 61.9375rem) {
.ts-title {
margin-bottom: 2.25rem;
}
}
@media (min-width: 62rem) {
.ts-title {
margin-bottom: 2.5rem;
}
}
.ts-title h5 {
font-weight: normal;
opacity: 0.5;
}
:root {
/* Transition */
/*--tr-cubic: .5s cubic-bezier(.03,.18,.05,1.01);*/
}
/*-------------------------------------------
-- Utilities
-------------------------------------------*/
/* Social Icons */
/* Overlay */
/* Flip x */
/* Flip Y */
.ts-video-bg {
height: 100%;
}
.ts-video-bg .fluid-width-video-wrapper {
height: 100%;
}
.ts-video-bg iframe {
border: 0;
height: 100%;
width: 100%;
}
/*-------------------------------------------
-- Width
-------------------------------------------*/
/*-------------------------------------------
-- Z-index
-------------------------------------------*/
/***********************************************************************************************************************
C. Components
***********************************************************************************************************************/
/*-------------------------------------------
-- Block
-------------------------------------------*/
.ts-block {
padding-bottom: 4rem;
padding-top: 4rem;
position: relative;
}
@media (min-width: 62rem) and(max-width: 74.9375rem) {
.ts-block {
padding-bottom: 8rem;
padding-top: 8rem;
}
}
@media (min-width: 75rem) {
.ts-block {
padding-bottom: 9rem;
padding-top: 9rem;
}
}
section {
position: relative;
}
/*-------------------------------------------
-- Blockquote
-------------------------------------------*/
blockquote h2 {
margin-bottom: 2rem;
}
.ts-blog-thumb .ts-blog-image:hover .ts-background-image {
opacity: 0.5;
}
.ts-blog-thumb .ts-blog-image .ts-background-image {
transition: 0.3s ease;
}
/*-------------------------------------------
-- Box
-------------------------------------------*/
/*-------------------------------------------
-- Buttons
-------------------------------------------*/
.btn {
border-width: 0.125rem;
box-shadow: none;
font-weight: 600;
font-size: 0.875rem;
padding: 1.2rem 2.5rem;
position: relative;
outline: none !important;
text-decoration: underline;
text-transform: uppercase;
}
.btn:hover {
text-decoration: underline;
}
.btn:hover .fa-arrow-right {
-webkit-transform: translateX(0.5rem);
transform: translateX(0.5rem);
}
.btn.btn-sm {
padding: 0.75rem 1.5rem;
}
.btn.ts-btn-arrow:after {
content: "";
font-family: "Pretendard", sans-serif;
font-weight: 700;
font-size: 0.625rem;
margin-left: 0.75rem;
position: relative;
top: -0.0625rem;
vertical-align: middle;
}
.btn span {
transition: 0.3s ease;
}
.btn .status {
bottom: 0;
height: 1.375rem;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 1.5rem;
}
.btn .status .spinner {
left: 0.3125rem;
transition: 0.3s ease;
top: 0.1875rem;
position: absolute;
opacity: 0;
}
.btn .status .status-icon {
border-radius: 50%;
left: 0;
opacity: 0;
font-size: 0.625rem;
padding: 0.25rem 0.4375rem;
position: relative;
transition: 0.3s ease;
z-index: 1;
-webkit-transform: scale(0);
transform: scale(0);
}
.btn .status .status-icon.valid {
background-color: green;
}
.btn .status .status-icon.invalid {
background-color: red;
}
.btn.processing span {
opacity: 0.2;
}
.btn.processing .spinner {
opacity: 1;
}
.btn.done .ts-spinner {
opacity: 0;
}
.btn.done .status-icon {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.btn-primary {
background-color: #000;
border-color: #000;
color: #fff;
}
.btn-primary:hover {
background-color: #000;
border-color: #000;
box-shadow: none;
}
.btn-primary:focus {
background-color: #000;
border-color: #000;
box-shadow: none;
}
.btn-primary:active {
background-color: #000;
border-color: #000;
box-shadow: none;
}
.btn-sm {
font-size: 0.8125rem;
padding: 0.375rem 1rem;
}
[class*="btn-outline-"] {
box-shadow: none;
}
/*
&:hover {
color: var(--color-white);
&:before {
animation: ts-link-arrow-effect-animation-in;
animation-fill-mode: forwards;
animation-duration: .4s;
animation-timing-function: cubic-bezier(.6,.01,0,1);
}
span {
transform: translateX(0%);
}
}
*/
/*-------------------------------------------
-- Card
-------------------------------------------*/
.card {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: none;
box-shadow: 0.125rem 0.1875rem 0.9375rem rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.card-columns .card {
margin-bottom: 1.25rem;
}
.ts-cards-same-height > div[class*="col-"] {
display: flex;
}
.ts-cards-same-height > div[class*="col-"] .card {
width: 100%;
}
/*-------------------------------------------
-- Circle
-------------------------------------------*/
[class*="ts-circle"] {
position: relative;
}
/* --Description */
/*-------------------------------------------
-- Forms
-------------------------------------------*/
form label,
.ts-form label {
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
}
.form-control {
height: auto;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
#ts-footer #ts-footer-main {
border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.3);
padding-bottom: 6rem;
padding-top: 6rem;
}
@media (min-width: 48rem) {
#ts-footer #ts-footer-main {
padding-bottom: 8rem;
padding-top: 8rem;
}
}
#ts-footer nav .nav-link {
text-decoration: underline;
padding-left: 0;
}
#ts-footer nav .nav-link:first-child {
padding-top: 0;
}
.ts-gallery.no-gutters .ts-gallery__item {
margin-bottom: 0;
}
.ts-gallery__item {
border-radius: 0;
display: flex;
margin-bottom: 2rem;
justify-content: flex-end;
position: relative;
padding: 2rem;
overflow: hidden;
width: 100.1%;
}
@media (min-width: 36rem) {
.ts-gallery__item {
padding: 2rem;
}
}
.ts-gallery__item.ts-gallery__item--big {
height: 40rem;
}
.ts-gallery__item .ts-gallery__item-description {
margin-bottom: 0;
color: #fff;
z-index: 1;
}
.ts-gallery__item.ts-floated-description {
background-color: #000;
}
.ts-gallery__item.ts-floated-description .ts-background {
opacity: 0.6;
}
.ts-gallery__item:hover .ts-background {
-webkit-transform: scale(1.1) rotate(0.01deg);
transform: scale(1.1) rotate(0.01deg);
}
.ts-gallery__item.ts-half {
}
@media (min-width: 36rem) {
.ts-gallery__item.ts-half {
height: calc(12.5rem - 1rem);
}
}
.ts-gallery__item h3 {
font-weight: 400;
font-size: 2rem;
/*text-decoration: underline;*/
}
@media (min-width: 36rem) {
.ts-gallery__item h3 {
font-size: 2.625rem;
}
}
.ts-gallery__item .ts-background {
-webkit-transform: scale(1) rotate(0.01deg);
transform: scale(1) rotate(0.01deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: 0.8s ease;
z-index: 0;
}
/*-------------------------------------------
-- HR
-------------------------------------------*/
/*-------------------------------------------
-- Inputs
-------------------------------------------*/
/*-------------------------------------------
-- List
-------------------------------------------*/
/*-------------------------------------------
-- Loading Screen
-------------------------------------------*/
body.has-loading-screen:before {
background-color: #000;
content: "";
height: 100%;
right: 0;
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
opacity: 1;
pointer-events: none;
transition: opacity 0.6s ease, visibility 0s linear 0.6s;
visibility: visible;
}
body.has-loading-screen:after {
content: url("../../assets/img/loading.svg");
height: 2.5rem;
width: 2.5rem;
position: fixed;
margin: auto;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
transition: 1.5s ease;
top: 0;
z-index: 10000;
}
body.has-loading-screen .ts-page-wrapper {
visibility: hidden;
}
body.has-loading-screen #main-navigation,
body.has-loading-screen #brand-navigation {
display: none;
}
body.has-loading-screen.loading-done:before {
opacity: 0;
visibility: hidden;
}
body.has-loading-screen.loading-done:after {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
body.has-loading-screen.loading-done .ts-page-wrapper {
visibility: visible;
}
body.has-loading-screen.loading-done #main-navigation,
body.has-loading-screen.loading-done #brand-navigation {
display: block;
}
/*-------------------------------------------
-- Map
-------------------------------------------*/
.map a[href^="http://maps.google.com/maps"] {
display: none !important;
}
.map a[href^="https://maps.google.com/maps"] {
display: none !important;
}
/*-------------------------------------------
-- Hero
-------------------------------------------*/
#ts-hero {
align-items: center;
display: flex;
position: relative;
overflow: hidden;
}
#ts-hero .ts-background-image {
background-position: top center;
}
/*-------------------------------------------
-- Navbar
-------------------------------------------*/
#main-navigation .navbar {
/*align-items: flex-start;*/
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
background-color: #1f1f1f;
border-right: 0.0625rem solid rgba(255, 255, 255, 0.2);
font-size: 1.5rem;
font-weight: 600;
padding: 0;
transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
overflow-x: hidden;
overflow-y: auto;
padding-top: 2rem;
}
#main-navigation .navbar.navbar-light {
background-color: #fff;
border-right: 0.0625rem solid rgba(0, 0, 0, 0.2);
}
#main-navigation
.navbar.navbar-light
.navbar-nav
> .nav-item
> .nav-link::after {
background-color: #000;
}
#main-navigation .navbar.navbar-light .nav-link {
color: #000;
}
#main-navigation .navbar-nav {
padding: 3.5rem 2.125rem;
width: 100%;
}
#main-navigation .navbar-nav > .nav-item > .nav-link:after {
background-color: #fff;
content: "";
height: 0.125rem;
left: 0;
bottom: 0.25rem;
position: absolute;
width: 0;
opacity: 0.2;
transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}
#main-navigation .navbar-nav > .nav-item > .nav-link.active:after {
width: 100%;
opacity: 1;
}
#main-navigation
.navbar-nav
> .nav-item
> .nav-link[aria-expanded="true"]:not(.active) {
opacity: 0.6;
}
#main-navigation .navbar-nav > .nav-item .nav {
font-size: 75%;
padding: 0.5rem 0;
}
#main-navigation .nav-item:focus-within .nav-link {
opacity: 0.6;
}
#main-navigation .nav-item:focus-within .nav-link:hover {
opacity: 1;
}
#main-navigation .nav-link {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
white-space: nowrap;
color: #fff;
position: relative;
opacity: 0.3;
}
#main-navigation .nav-link:hover {
opacity: 0.6;
transition-delay: 0s;
padding-left: 0.25rem;
}
#main-navigation .nav-link.active,
#main-navigation .nav-link.active:focus-within {
opacity: 1;
}
#main-navigation .nav-link[data-toggle="collapse"]:before {
content: "▾";
position: absolute;
right: 0;
font-size: 0.875rem;
top: 0;
height: 1rem;
bottom: 0;
margin: auto;
transition: 0.8s ease;
opacity: 0;
}
#main-navigation
.nav-link[data-toggle="collapse"][aria-expanded="true"]:before {
content: "▴";
}
#main-navigation .nav-link span {
transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}
#main-navigation .nav-link .ts-hidden {
display: inline-block;
opacity: 0;
-webkit-transform: translateX(0.375rem);
transform: translateX(0.375rem);
visibility: hidden;
width: 100%;
}
#brand-navigation .container {
display: flex;
align-items: center;
position: relative;
}
#brand-navigation .navbar-toggler {
border-radius: 0;
color: #fff;
border: none;
padding: 1rem;
outline: none !important;
transition: 0.3s ease;
z-index: 1;
}
#brand-navigation .ts-content {
left: 0;
width: 100%;
}
.navbar-brand {
margin-right: 0;
}
body.nav-hovered .ts-content {
-webkit-transform: translateX(0);
transform: translateX(0);
}
body.nav-hovered #main-navigation .navbar {
width: 100%;
}
body.nav-hovered #main-navigation .navbar .ts-hidden {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
visibility: visible;
}
body.nav-hovered
#main-navigation
.navbar
.nav-link[data-toggle="collapse"]:before {
opacity: 1;
}
body.nav-hovered #main-navigation .navbar-toggler {
left: auto;
right: 0;
}
/*-------------------------------------------
-- Page
-------------------------------------------*/
.ts-page-wrapper {
overflow: hidden;
}
.ts-content {
}
@media (max-width: 35.9375rem) {
.ts-content {
margin-top: 0rem;
}
}
/*-------------------------------------------
-- Partners
-------------------------------------------*/
/*-------------------------------------------
-- Progress
-------------------------------------------*/
/*-------------------------------------------
-- Promo Numbers
-------------------------------------------*/
.text-white .ts-promo-number figure {
border-bottom: 0.25rem solid #fff;
}
/*-------------------------------------------
-- Slider
-------------------------------------------*/
.ts-slider .ts-slide .ts-background img,
.ts-slider .ts-slide .ts-background-image img {
display: none !important;
}
/***********************************************************************************************************************
D. Plugins Styles
***********************************************************************************************************************/
/*-------------------------------------------
-- Magnific Popup
-------------------------------------------*/
/* overlay at start */
/* overlay animate in */
/* overlay animate out */
/* content at start */
/* content animate it */
/* content animate out */
/*-------------------------------------------
-- Owl Carousel
-------------------------------------------*/
/***********************************************************************************************************************
E. Template Specific Elements
***********************************************************************************************************************/
/*-------------------------------------------
-- Other
-------------------------------------------*/
/* 여기부터 AI가 만드는 추가되는 코드 */
/* 기존 메뉴바 관련 스타일 (변경 없음) */
.navbar {
/* 반응형: 화면이 작을 땐 100%, 큰 화면에선 최대 1200px */
width: 100%;
max-width: 1300px;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.navbar-dark .navbar-nav .nav-link {
color: white;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: #1e73ff;
}
.navbar-dark .navbar-brand {
color: white;
}
.custom-navbar {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background: linear-gradient(
15deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.8) 100%
);
border-radius: 0 0 20px 20px;
padding: 7px 13px 7px 7px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05) inset;
transition: background-color 0.3s ease;
}
.custom-navbar:hover {
background: black;
}
.navbar-nav .dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
max-height: 0;
overflow: visible;
/* ::before가 보이도록 */
background-color: white;
transition:
visibility 0s,
opacity 0.2s linear,
max-height 0.2s ease-in-out;
transition-delay: 0s, 0s, 0s;
position: relative;
/* 가상 요소 기준 */
border: 1px solid black;
border-top: none;
/* 상단 라인은 ::before로 대체 */
border-radius: 0;
/* 각진 사각형으로 변경 */
}
.navbar-nav .dropdown:hover .dropdown-menu {
visibility: visible;
opacity: 1;
max-height: 500px;
transition-delay: 0s, 0s, 0s;
}
/* 상단 라인 애니메이션을 위한 ::before 가상 요소 */
.navbar-nav .dropdown-menu::before {
content: "";
position: absolute;
top: -5px;
/* 메뉴 상단 외부에 위치 */
left: 0;
right: 0;
height: 5px;
/* 라인 두께 */
background: #1e73ff;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.5s ease;
}
/* 드롭다운 메뉴 호버 시 상단 라인이 중앙에서 양쪽 끝으로 확장 */
.navbar-nav .dropdown:hover .dropdown-menu::before {
transform: scaleX(1);
}
.navbar-nav .dropdown-menu .dropdown-item {
color: black;
}
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus {
background-color: #1e73ff !important;
}
/* 페이지 전체에 적용할 오버레이 */
.page-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
pointer-events: none;
z-index: 1020;
/* 메뉴바(1030)보다 낮은 z-index */
transition: background 0.3s ease;
}
/* 메뉴바에 마우스가 올라가 있을 때, 오버레이 효과 적용 */
.custom-navbar:hover ~ .page-overlay {
background: rgba(0, 0, 0, 0.5);
}
/* 여기부터 AI가 만드는 추가되는 코드(마우스 커서 따라다.) */
/* -------------------------------------------
cursor
------------------------------------------- */
/* 기존 세로 스크롤바 스타일: 색상, 너비 등 */
/* 여기서부터 “가로 스크롤바”만 제거 */
/* 글자 애니메이션 효과 */
/* gallery 안에서만 background/position 리셋 */
.ts-gallery__item .ts-background,
.ts-gallery__item .ts-img-into-bg {
position: static;
/* 아이템 흐름 안에 두고 */
background: none;
/* background-image 가 없다면 투명 */
width: 100%;
height: auto;
overflow: visible;
}
/* 숨겨진 ![]()
노출 */
.ts-gallery__item .ts-img-into-bg img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* 아이템 높이는 이미지에 맡김 */
.ts-gallery__item {
display: block;
height: auto;
padding: 0;
/* 원하면 여백만 조절 */
}
/* =========================
Accessibility / SEO
========================= */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Premium CTA Box Base */
/* 흰색 페이드 레이어 */
/* 텍스트 */
/* 라이트 스윕(은은한 포인트) */
/* Hover 효과 */
/* Focus 접근성 */
/* Mobile */
/* Hero CTA Button - Premium Fade + Gradient Line + Ripple */
/* 텍스트는 레이어 위로 */
/* 1) 흰색 페이드 배경 레이어 */
/* 2) 미세한 그라데이션 라인(프리미엄 테두리 느낌)
- 평소엔 거의 안 보이고, hover에서만 은은하게 살아납니다. */
/* Hover */
/* 흰 배경 페이드 인 */
/* 배경이 흰색으로 바뀔 때 글자도 검은색으로 */
/* Primary (문의 버튼 살짝 강조) */
/* 3) Soft Ripple (클릭 터치감)
- pseudo-element로 생성, 클릭 시 애니메이션 */
/* =========================
PTLINK Paper Section (V2)
- 두 번째 이미지 느낌(문서형 + 청록 박스)
- 상단/하단 가운데 정렬
- 모바일 대응
========================= */
/* 상단 헤더 박스: 가운데 정렬 */
/* 본문 */
/* 3열 그리드 */
/* 청록 박스 */
/* 숫자 3박스 */
/* 차별화 4박스 */
/* 하단 한 줄: 가운데 정렬 */
/* 반응형 */
/* 갤러리 캡션/태그(링크 밖) - 레이아웃 안 깨짐 */
/* ===== 포트폴리오 상단 라운딩 태그 1줄 정렬 ===== */
/* =====================================================
1. 라운드 박스 사이 구분점(·, •) 완전 제거
===================================================== */
.pf-tags li::before,
.pf-tags li::after,
.pf-tags a::before,
.pf-tags a::after,
.pf-tags span::before,
.pf-tags span::after,
.hero-internal-links a + a::before {
content: none !important;
display: none !important;
}
/* =====================================================
2. 라운드 박스(태그) 스타일 – 작게, 어둡게, 1줄
===================================================== */
/* =========================
pf-tags: 불릿(점) 원천 제거 + 1줄 정렬 유지
========================= */
.pf-tags {
list-style: none !important;
/* ✅ 기본 불릿 제거 */
padding-left: 0 !important;
/* ✅ 기본 들여쓰기 제거 */
margin: 10px 0 0 !important;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
.pf-tags li {
list-style: none !important;
/* ✅ 브라우저/리셋 충돌 대비(이중 안전장치) */
margin: 0 !important;
font-size: 0.72rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.22);
padding: 6px 14px;
border-radius: 999px;
white-space: nowrap;
}
/* 혹시 어딘가에서 marker를 건드렸다면 이것도 차단 */
.pf-tags li::marker {
content: "" !important;
}
/* =====================================================
3. 제목(상단 문장) – 조금 더 밝게 + 중앙정렬
===================================================== */
/* =========================
pf-meta 제목: 밝게 + 중앙정렬
========================= */
.pf-meta {
text-align: center;
}
.pf-cap {
text-align: center;
color: rgba(255, 255, 255, 0.88);
/* ✅ 조금 더 밝게 */
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
margin-top: 10px;
}
.pf-cap .pf-sub {
color: rgba(255, 255, 255, 0.65);
font-weight: 400;
}
/* 라벨(제목+태그) 영역과 다음 섹션 사이 간격 확보 */
.pf-meta {
padding-bottom: 5px;
/* 내부 아래 여백 */
margin-bottom: 5px;
/* 다음 요소와 거리 */
}
/* 태그(라운딩 박스) 자체 아래 여백 */
.pf-tags {
margin-bottom: 10px !important;
}
/* =========================
포트폴리오 '자세히 보기' 버튼
========================= */
/* ===== 태그 기본 (글자 더 작게) ===== */
.pf-tags li {
font-size: 0.68rem;
/* 기존보다 더 작게 */
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.22);
padding: 5px 12px;
border-radius: 999px;
white-space: nowrap;
}
/* ===== '자세히 보기' 전용 ===== */
.pf-tags li.pf-more {
padding: 0;
/* a 태그에 맡김 */
background: transparent;
border: none;
}
.pf-tags li.pf-more a {
display: inline-block;
font-size: 0.66rem;
/* 태그보다 더 작게 */
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
padding: 5px 12px;
border-radius: 999px;
border: 1px dashed rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.02);
transition: all 0.25s ease;
}
.pf-tags li.pf-more a:hover {
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.45);
}
.ptlk-trust {
max-width: 980px;
margin: 0 auto;
}
.ptlk-trust__desc {
margin: 0 auto 10px;
line-height: 1.7;
opacity: 0.9;
}
/* 인증 로고 박스 */
.ptlk-trust__logo-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
background: #000;
padding: 18px 22px;
border-radius: 16px;
margin: 10px auto 0;
}
/* 로고 이미지 공통 */
.ptlk-trust__logo-wrap img {
width: 150px;
height: auto;
background: transparent;
}
/* =========================
TRUST LOGO WRAP (Smaller)
========================= */
.ptlk-trust__logo-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px 14px;
/* 간격도 함께 소폭 축소 */
margin: 12px auto 0;
max-width: 880px;
/* ✅ 여기 수정 */
padding: 6px 8px;
/* 상하 3px, 좌우 8px */
}
.ptlk-trust__logo-wrap img {
display: block;
height: auto;
max-width: 150px;
/* ▼ 기존 180px → 150px */
width: clamp(105px, 18vw, 150px);
object-fit: contain;
}
/* 태블릿 */
@media (max-width: 991.98px) {
.ptlk-trust__logo-wrap {
gap: 10px 12px;
max-width: 680px;
}
}
/* 모바일 */
@media (max-width: 575.98px) {
.ptlk-trust__logo-wrap {
gap: 8px 10px;
}
.ptlk-trust__logo-wrap img {
width: calc(50% - 10px);
/* 2열 유지 */
max-width: 140px;
}
}
/* 소형 모바일 */
@media (max-width: 380px) {
.ptlk-trust__logo-wrap img {
max-width: 130px;
}
}
/* =====================================================================
PTLINK OVERRIDES (merged from overrides.css)
- Keep this block at the END of style.css so it can override earlier rules
===================================================================== */
/*
overrides.css
This external stylesheet consolidates styles previously written inline within the HTML.
Moving styles to an external file helps search engines reach the main content faster,
improving load performance and crawl budget as recommended by SEO best practices【776764114552513†L89-L100】.
*/
/* Review section styling */
/* Review section (id updated to match index.html) */
#ptlk-reviews {
background-color: #111;
color: #ffffff;
padding: 2rem 1rem;
position: relative;
overflow: hidden;
}
#ptlk-reviews .review-container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 1rem;
}
#ptlk-reviews .review-card {
background-color: #222;
color: #ffffff;
border-radius: 8px;
padding: 1rem;
min-width: 280px;
max-width: 320px;
flex: 0 0 auto;
scroll-snap-align: start;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#ptlk-reviews .review-profile {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
#ptlk-reviews .review-profile img {
width: 48px;
height: 48px;
border-radius: 50%;
margin-right: 0.5rem;
}
#ptlk-reviews .review-name {
font-weight: 700;
margin-right: 0.5rem;
}
#ptlk-reviews .review-title {
font-size: 0.875rem;
color: #cccccc;
}
#ptlk-reviews .review-rating {
color: #d1d5db;
margin-bottom: 0.5rem;
}
#ptlk-reviews .review-body {
font-size: 0.95rem;
line-height: 1.4;
margin-bottom: 0.5rem;
}
#ptlk-reviews .review-date {
font-size: 0.75rem;
color: #aaaaaa;
}
/* Fading gradients at edges of review list */
#ptlk-reviews .fade-gradient {
position: absolute;
top: 0;
width: 60px;
height: 100%;
pointer-events: none;
}
#ptlk-reviews .fade-gradient.left {
left: 0;
background: linear-gradient(to right, #111 0%, rgba(17, 17, 17, 0) 100%);
}
#ptlk-reviews .fade-gradient.right {
right: 0;
background: linear-gradient(to left, #111 0%, rgba(17, 17, 17, 0) 100%);
}
/* Note text below reviews */
#ptlk-reviews .review-note {
color: #cccccc;
font-size: 0.85rem;
margin-top: 0.5rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
#ptlk-reviews .review-card {
min-width: 80%;
}
}
/* Kakao chat icon sizing */
/* Remove underline and shadow effects from org chart items */
/* Custom hero left alignment (User request: reposition hero content left on desktop) */
@media (min-width: 992px) {
/* Align the hero block (#ts-hero > .container) to the left side of the viewport while leaving some breathing room */
#ts-hero .container {
margin-left: clamp(64px, 8vw, 240px);
margin-right: auto;
text-align: left;
align-items: flex-start;
}
/* Ensure the hero title, subcopy and services align left within the shifted container */
#ts-hero .hero-title,
#ts-hero .hero-subcopy,
#ts-hero .hero-services {
text-align: left;
align-self: flex-start;
}
}
/* =========================
PTLINK HERO FIX (subcopy alignment + mobile sizing)
========================= */
/* Always keep hero content left-aligned across ALL breakpoints */
#ts-hero .container {
text-align: left !important;
align-items: flex-start !important;
}
/* Keep hero text blocks left-aligned */
#ts-hero .hero-title,
#ts-hero .hero-subcopy {
text-align: left !important;
align-self: flex-start !important;
}
/* Tablet/mobile: keep same left gutter (avoid accidental centering) */
@media (max-width: 991.98px) {
#ts-hero .container {
margin-left: clamp(20px, 6vw, 48px) !important;
margin-right: auto !important;
}
}
/* =========================
PTLINK HERO SIZE OVERRIDE v3
- Tablet < 992: slightly smaller
- Mobile < 576: even smaller
- Works even if #ts-hero is missing
========================= */
/* Always left align (fallback without #ts-hero) */
/* Tablet & below: make subcopy smaller (than desktop) */
@media (max-width: 991.98px) {
#ts-hero .hero-subcopy,
#ts-hero .hero-subcopy b,
.hero-subcopy,
.hero-subcopy b {
font-size: clamp(13px, 2.2vw, 16px) !important;
line-height: 1.6 !important;
}
}
/* Mobile: make it smaller than tablet */
@media (max-width: 575.98px) {
#ts-hero .hero-subcopy,
#ts-hero .hero-subcopy b,
.hero-subcopy,
.hero-subcopy b {
font-size: clamp(12px, 3vw, 14px) !important;
line-height: 1.6 !important;
}
}
/* =====================================================
PTLINK: WORK hover (CLS-safe) + Custom Cursor (GPU)
- No width/height/margin changes on hover (transform/opacity only)
- Cursor uses translate3d (compositor) for smoothness
===================================================== */
/* --- WORK image hover --- */
#works .ts-gallery__item {
position: relative;
overflow: hidden;
/* prevents scaled image bleeding */
transform: translateZ(0);
/* promote layer */
}
#works .ts-gallery__item .ts-img-into-bg > img,
#works .ts-gallery__item img {
transform: translateZ(0);
will-change: transform, filter;
transition:
transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
filter 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.28s ease;
}
#works .ts-gallery__item::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
600px 280px at 50% 50%,
rgba(71, 254, 254, 0.1),
transparent 60%
);
opacity: 0;
transition: opacity 0.28s ease;
pointer-events: none;
}
#works .ts-gallery__item:hover::after,
#works .ts-gallery__item:focus-within::after {
opacity: 1;
}
#works .ts-gallery__item:hover img,
#works .ts-gallery__item:focus-within img {
transform: scale(1.04);
}
/* Keep meta area stable: do NOT change padding/margins on hover */
#works .pf-meta,
#works .pf-cap,
#works .pf-tags {
transition: color 0.2s ease;
}
#works .pf-more a {
transition:
background-color 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
#works .pf-more a:hover {
transform: translateY(-1px);
}
/* transform only */
/* --- Custom cursor (CLS 0 + GPU friendly) --- */
/* Container is fixed-size; only opacity/transform of pseudo element changes */
.custom-cursor {
position: fixed;
left: 0;
top: 0;
width: 160px;
/* fixed box => no layout shift */
height: 160px;
pointer-events: none;
z-index: 9999;
transform: translate3d(50vw, 50vh, 0);
will-change: transform;
display: grid;
place-items: center;
mix-blend-mode: normal;
opacity: 1;
}
.custom-cursor::before {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
transform: scale(0.1);
/* idle = dot */
opacity: 0.28;
transition:
transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.18s ease,
background-color 0.18s ease,
backdrop-filter 0.18s ease;
will-change: transform, opacity;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.custom-cursor__text {
position: relative;
z-index: 1;
font-family: var(--ptlk-font, "Pretendard", sans-serif);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.96);
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.18s ease,
transform 0.18s ease;
user-select: none;
white-space: nowrap;
}
.custom-cursor.is-active::before {
transform: scale(1);
opacity: 0.95;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.custom-cursor.is-active .custom-cursor__text {
opacity: 1;
transform: translateY(-2px);
}
/* Hide cursor on touch / smaller screens */
@media (hover: none), (pointer: coarse), (max-width: 1200px) {
.custom-cursor {
position: fixed;
left: 0;
top: 0;
width: 160px;
/* fixed box => no layout shift */
height: 160px;
pointer-events: none;
z-index: 9999;
transform: translate3d(50vw, 50vh, 0);
will-change: transform;
display: grid;
place-items: center;
mix-blend-mode: normal;
opacity: 1;
}
}
/* Accessibility: if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
#works .ts-gallery__item img {
transition: none !important;
}
#works .ts-gallery__item::after {
transition: none !important;
}
.custom-cursor::before,
.custom-cursor__text {
position: relative;
z-index: 1;
font-family: var(--ptlk-font, "Pretendard", sans-serif);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.96);
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.18s ease,
transform 0.18s ease;
user-select: none;
white-space: nowrap;
}
}
/* PTLINK: CLS-safe guardrails (WORK)
Prevent hover rules from changing layout metrics inside #works.
*/
#works .ts-gallery__item:hover,
#works .ts-gallery__item:focus-within {
padding: 0 !important;
margin: 0 !important;
border-width: inherit !important;
}
#works .ts-gallery__item:hover img,
#works .ts-gallery__item:focus-within img {
transform: scale(1.05);
}
/* =====================================================
PTLINK: WORK hover override (scale only, CLS-safe)
- Enforce no color/filter changes
===================================================== */
#works .ts-gallery__item img {
filter: none !important;
opacity: 1 !important;
transform: translateZ(0) scale(1) !important;
transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
/* ← 여기로 이동 */
}
#works .ts-gallery__item:hover img,
#works .ts-gallery__item:focus-within img {
filter: none !important;
opacity: 1 !important;
transform: translateZ(0) scale(1.05) !important;
}
/* Disable any hover overlays that might look like color change */
#works .ts-gallery__item::after {
opacity: 0 !important;
}
/* =========================================
PTLK ASK OVERRIDE (CLEAN v2)
- Card/Button: square
- Icon: top-left, icon box transparent
- Icon content: 70% and forced white
- Text group: pinned to bottom
========================================= */
/* =========================
Icon container (TRANSPARENT)
========================= */
/* Inner svg/img size 70% */
/* Force INLINE SVG to white */
/* If SVG uses currentColor */
/* IMG-based SVG / raster → white */
/* EN weight */
/* Text spacing */
/* ================================
REMOVE ALL CARD OVERLAYS / BORDERS
================================ */
/* ================================
Section background: TRANSPARENT
================================ */
section.ptlk-ask.ptlk-ask--v2.ts-bg-black {
background: transparent !important;
background-color: transparent !important;
}
/* =========================================
✅ BUTTON HOVER (ONLY THIS ADDED)
========================================= */
/* =====================================================
PTLINK PATCH: cotact-info background repeat-x
- Override inline #cotact-info{background:#fff !important;}
- Use higher specificity + !important so it wins
===================================================== */
html body #cotact-info {
background-image: url("https://www.ptlink.co.kr/assets/img/bg-black.jpg") !important;
background-repeat: repeat-x !important;
/* horizontal only */
background-position: top left !important;
background-size: auto !important;
}
/* =====================================================
PTLINK PATCH v2: #cotact-info bottom bg (repeat-x only)
- Eliminates white gap by overlapping next section
- Vertical flip applied
- Keeps existing section-start background intact
===================================================== */
#cotact-info {
position: relative;
overflow: visible;
/* allow overlap */
}
/* pull next section up to remove white gap */
#cotact-info + section {
margin-top: 0px;
}
#cotact-info::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -100px;
/* extend into next section */
height: 220px;
background-image: url("https://www.ptlink.co.kr/assets/img/bg-black.jpg");
background-repeat: repeat-x;
background-position: bottom left;
background-size: auto;
transform: scaleY(-1);
transform-origin: center;
pointer-events: none;
z-index: 2;
}
/* keep content above decoration */
#cotact-info > * {
position: relative;
z-index: 3;
}
/* =====================================================
PTLINK PATCH v3: #cotact-info spacing fix
- Add extra spacing so content does not overlap top/bottom decorations
- Based on existing decoration height (220px) + buffer (100px)
===================================================== */
#cotact-info {
padding-top: calc(4rem+ 100px);
/* existing ts-block padding + buffer */
padding-bottom: calc(4rem+ 100px);
}
@media (min-width: 62rem) and(max-width: 74.9375rem) {
#cotact-info {
padding-top: calc(8rem+ 100px);
padding-bottom: calc(8rem+ 100px);
}
}
@media (min-width: 75rem) {
#cotact-info {
padding-top: calc(9rem+ 100px);
padding-bottom: calc(9rem+ 100px);
}
}
/* =====================================================
PTLINK PATCH: ASK v2 button size 50% + left align
- ASK 카드 내 CTA 버튼 크기 축소 + 왼쪽 정렬
===================================================== */
/* 모바일 화면 대응 */
/* =====================================================
IMAGE SLIDER: 좌우 화살표 버튼
===================================================== */
/* 화살표 아이콘 공통 스타일 */
/* 이전(왼쪽) 버튼 위치 */
/* 이전 화살표 방향 */
/* 다음(오른쪽) 버튼 위치 */
/* 다음 화살표 방향 */
/* =====================================================
IMAGE SLIDER: 하단 네비게이션 pill
===================================================== */
/* 슬라이드 이동 점(dot) */
/* 활성화된 슬라이드 표시 */
.ptlk-image-slider--center .ptlk-slider-dot.is-active {
width: 44px;
/* 활성 상태에서 막대 형태로 확장 */
background: rgba(255, 255, 255, 0.92);
/* 더 선명한 흰색 */
}
/* =====================================================
Mobile: 슬라이더 UI 축소
===================================================== */
/* ===============================
PTLINK IMAGE SLIDER (Preview Mode)
- current slide centered via viewport padding
- prev/next previews visible
=============================== */
/* arrows */
/* bottom nav pill */
.ptlk-image-slider--preview .ptlk-slider-dot.is-active {
width: 44px;
background: rgba(255, 255, 255, 0.92);
}
/* ===============================
PTLINK IMAGE SLIDER (Center Loop)
- smooth slide (no teleport on wrap)
- centered with prev/next preview
=============================== */
/* arrows */
/* bottom nav pill */
.ptlk-image-slider--centerloop .ptlk-slider-dot.is-active {
width: 44px;
background: rgba(255, 255, 255, 0.92);
}
/* ===============================
PTLINK IMAGE SLIDER (ScrollSnap)
- smooth left/right movement
- previews visible
- no "teleport" (native smooth scroll)
=============================== */
/* arrows */
/* bottom nav pill */
.ptlk-image-slider--snap .ptlk-slider-dot.is-active {
width: 44px;
background: rgba(255, 255, 255, 0.92);
}
/* ===============================
REMOVE HEADER DIVIDER (WHAT WE DO)
=============================== */
.ptlk-work-head {
border-bottom: 0 !important;
}
.ptlk-work-head::before,
.ptlk-work-head::after {
content: none !important;
display: none !important;
border: 0 !important;
height: 0 !important;
background: none !important;
}
/* ==============================\n PTLINK SECTION TITLES – H2 2x\n ============================== */
.ptlk-section-title {
font-size: clamp(3.2rem, 6vw, 4.5rem) !important;
/* ~2x default h2 */
font-weight: 700 !important;
letter-spacing: -0.03em;
line-height: 1.15;
margin: 0 0 1.3rem 0;
}
/* ==============================
PTLINK SECTION TITLES – H2 2x
============================== */
.ptlk-section-title {
font-size: clamp(3.2rem, 6vw, 4.5rem) !important;
/* ~2x default h2 */
font-weight: 700 !important;
letter-spacing: -0.03em;
line-height: 1.15;
margin: 0 0 1.3rem 0;
text-align: center;
}
/* ==============================
PTLINK TEXT EMPHASIS (30% UP)
ask / work / clients
============================== */
.askv2-kr,
.ptlk-work-desc,
.text-white.ptlk-clients-desc,
.ptlk-clients-foot {
font-size: 1.2em !important;
color: rgba(220, 220, 220, 0.95) !important;
}
/* ===============================
PTLINK DESKTOP DIVIDERS
- Desktop only
- Affects only rows with .ptlk-divider-row
=============================== */
@media (min-width: 992px) {
.ptlk-divider-row {
position: relative;
margin-top: 26px;
margin-bottom: 26px;
}
.ptlk-divider-row::before,
.ptlk-divider-row::after {
content: "";
position: absolute;
left: 15px;
right: 15px;
height: 1px;
background: rgba(255, 255, 255, 0.22);
pointer-events: none;
z-index: 5;
}
.ptlk-divider-row::before {
top: -28px;
}
.ptlk-divider-row::after {
bottom: -28px;
}
.ptlk-divider-row > [class*="col-"] {
position: relative;
}
.ptlk-divider-row > [class*="col-"]:not(:first-child)::before {
content: "";
position: absolute;
left: 0;
top: 18px;
bottom: 18px;
width: 1px;
background: rgba(255, 255, 255, 0.22);
pointer-events: none;
z-index: 5;
}
}
/* ===============================
PTLINK DESKTOP DIVIDERS (FIX v2)
- Restore horizontal line width (auto)
- Keep consistent 1px thickness
=============================== */
@media (min-width: 992px) {
/* Horizontal lines */
.ptlk-divider-row::before,
.ptlk-divider-row::after {
height: 1px !important;
width: auto !important;
transform: translateZ(0);
box-sizing: border-box;
}
/* Vertical separators */
.ptlk-divider-row > [class*="col-"]:not(:first-child)::before {
width: 1px !important;
height: auto !important;
transform: translateZ(0);
box-sizing: border-box;
}
}
/* =====================================
TEXT COLOR OVERRIDE v3 (SOFT GREY)
Normal text: softer grey
Bold text: pure white
===================================== */
/* Base body text – softer grey (matches reference screenshot) */
body,
p,
li,
span,
dd,
dt,
.keyfacts-bullets,
.ptlk-sec__text,
.ptlk-sec__list,
.ptlk-intro__lead,
.ptlk-intro__cardText,
.ptlk-intro__bullets {
color: rgba(255, 255, 255, 0.68) !important;
opacity: 1 !important;
}
/* Eyebrow / meta / labels – slightly dimmer */
/* Links follow body tone */
a {
color: rgba(255, 255, 255, 0.68) !important;
}
a:hover {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Bold / emphasis stays pure white */
b,
strong,
.ptlk-sec__lead b,
.ptlk-intro__lead b,
.keyfacts-title,
.keyfacts-btn,
.stat-num,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #ffffff !important;
font-weight: 700 !important;
}
/* =====================================
EXCEPTIONS: WHITE CARDS MUST USE DARK TEXT
(prevents light-grey/white text on white background)
===================================== */
.ptlk-cardrail__card,
.ptlk-cardrail__card * {
color: #111 !important;
}
/* Card-specific typography */
.ptlk-cardrail__title {
color: #111 !important;
}
.ptlk-cardrail__desc {
color: rgba(0, 0, 0, 0.72) !important;
}
/* If bold exists inside cards, keep it dark (NOT white) */
.ptlk-cardrail__card b,
.ptlk-cardrail__card strong {
color: #111 !important;
}
/* =====================================
FIX: HERO TITLE OPACITY OVERRIDE
Only titles – no transparency
===================================== */
#ts-hero h1,
#ts-hero h2,
#ts-hero .ts-h1,
#ts-hero .ts-h2,
#ts-hero .hero-title,
#ts-hero .hero-title * {
opacity: 1 !important;
color: #ffffff !important;
}
/* ===============================
CONTACT 배경 제거 (cotact-info)
=============================== */
#cotact-info {
background: transparent !important;
}
#cotact-info::before,
#cotact-info::after {
display: none !important;
}
/* ===============================
CONTACT 배경 '위쪽'까지 완전 제거 (강제)
- 기존 style.css에 있는 `html body #cotact-info{ background-image: url(bg-black.jpg) !important; }`
같은 고특이도 규칙을 덮어씁니다.
=============================== */
html body #cotact-info {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
}
/* 테마가 섹션 안에 ts-background 레이어를 꽂는 경우까지 차단 */
#cotact-info .ts-background,
#cotact-info [data-bg-image] {
background-image: none !important;
}
#cotact-info .ts-background {
display: none !important;
}
/* ===============================
CONTACT 섹션 배경을 흰색으로 변경
=============================== */
html body #cotact-info {
background: #ffffff !important;
background-image: none !important;
background-color: #ffffff !important;
}
/* 텍스트/링크도 흰배경에 맞게 검정 계열로 */
#cotact-info,
#cotact-info h2,
#cotact-info h3,
#cotact-info p,
#cotact-info label,
#cotact-info a,
#cotact-info span {
color: #111 !important;
}
/* ===============================
PTLINK INLINE