@font-face {
    font-family: 'TmonMonsori';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
:root{
    --main-blue:#092d4b;
    --main-orange:#ff6d28;
}
*{
    margin: 0;
    padding:0;
    border: 0;
    font-size: 100%;
    font-family: 'Pretendard', 'Roboto', 'Noto Sans KR' , sans-serif;
    box-sizing: border-box;
    line-height: 1.2;
    -webkit-font-smoothing: auto;
    color: var(--main-black);
}
html{
    position: relative;
}
body{
    overflow-y: auto;
}
ol, ul{
    list-style: none;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
img{
    width: 100%;
    height: auto;
    vertical-align: top;
}
a{
    text-decoration: none;
}
input:focus {
    outline: none;
}

button {
    outline: 0;
    border: 0;
}
.container{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 3%;
}
.header{
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 1px 6px #8d8d8d;
    z-index: 1000;
}
.hd-con{
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hd-logo{
    max-width: 190px;
}
.content-wrap{
    padding-top: 80px;
}
.section{
    width:100%;
    background-color: #ffffff;
}
.section1{
    background-image: url(../images/bg_01.jpg);
    border: 1px solid black;
}

.red-text{
    font-family: 'TmonMonsori';
    font-size: 44px;
    font-weight: 700;
    text-shadow: 0 0 5px #5c1a1a, 0 0 15px #b71414, 0 0 20px #bb1d1d;
    color: #ffffff;
    display: inline-block;
}
.mb-br{
    display: none;
}
.banner1{
    position: relative;
    padding:120px 0 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    height: 680px;
    position: relative;
}
.w_logo{
    max-width: 152px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
    user-select: none;
}

.banner1 .title{
    user-select: none;
    font-size: 86px;
    font-weight: 700;
    font-family: 'TmonMonsori';
    background-image: linear-gradient(
        to right,
        #462523 0,
        #b97309 22%,    
        #ebde9d 45%,
        #ededed 50%,
        #ebde9d 55%,
        #b97309 78%,
        #462523 100%
    );
    color:transparent;
    background-clip: text;
    -webkit-background-clip:text;
}
.banner1 .title span{
    font-family: 'TmonMonsori';
}
.banner1 .text{
    user-select: none;
    font-family: 'TmonMonsori';
    font-size: 38px;
    color: #f8f8f8;
    text-shadow: 1px 2px 5px #121212;
}
.banner1 .bottom{
    width: 100%;
    position: absolute;
    bottom:50px;
    left:50%;
    transform: translateX(-50%);
}
.banner1 .bottom p{
    font-size: 38px;
    color: #f8f8f8;
    font-family: 'TmonMonsori';
    z-index: 11;
    user-select: none;
    white-space: nowrap;
}
.banner1 .bottom p strong{
    font-size: 38px;
    color: #f8f8f8;
    font-family: 'TmonMonsori';
    position: relative;
    
}
.banner1 .bottom p strong::after{
    content:'';
    position: absolute;
    left:15px;
    top:-42px;
    opacity: 0.5;
    width: 235px;
    height: 66px;
    background-image: url(../images/db_logo.png);
    z-index: -1;
}

.section2{
    padding: 30px 0;
    background-color: black;
    border: 1px solid black;
}
.banner2{
    position: relative;
    padding: 70px 0 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    height: 560px;
    position: relative;
}
.banner2 .text{
    font-size: 44px;
    color: #f8f8f8;
    font-family: 'TmonMonsori';
    z-index: 11;
    user-select: none;
    word-break: keep-all;
}
.banner2 .bottom >  p{
    user-select: none;
    font-size: 62px;
    font-weight: 700;
    font-family: 'TmonMonsori';
    font-style: italic;
    color: rgb(255,242,181);
	background-image: linear-gradient(rgb(255 237 24) 28%, rgb(225 216 89) 40%, rgb(211 181 43) 54%);
	text-align: center;
	-webkit-text-fill-color: transparent;
    text-shadow:1px 3px 10px #d9d0a280;
}
.call{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}
.call p{
    font-size: 34px;
    font-weight: 700;
    line-height: 36px;
    color: #e5e4e4;
    letter-spacing: 1px;
    user-select: none;
}
.call p span{
    background: linear-gradient(to right, var(--main-blue), var(--main-orange) 100%);
    background-position: 0 85%;
    background-size: 100% 5px;
    background-repeat: repeat-x;
    color: #f1e8be;
}
.call p strong{
    position: relative;
    color: #ff2d2d;
}
.call p strong::after{
    position: absolute;
    content: '';
    top:-10px;
    left:50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background-color: #ff2d2d;
    border-radius: 50%;
}
.section3{
    padding:70px 0 20px;
    background-position: bottom center;
    background-repeat: no-repeat;
    border: 1px solid black;
}
.icon-wrap{
    width:100%;
    display: flex;
    flex-wrap: wrap;
}
.icon-box{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 46px;
}
.icon-box h5{
    font-size: 34px;
    font-weight: 700;
    color: #092d4b;
    text-align: center;
    margin-bottom: 12px;
}
.icon-box img{
    width: auto;
    height: 80px;
    margin-bottom: 24px;
    user-select: none;
}
.icon-box p{
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    line-height: 30px;
}
.icon-box p span{
    font-weight: 700;
    text-decoration: underline;
    color: #ef8300;
}
.section4{
    padding: 30px 0;
    background-color: #2a2a2a;
    border: 1px solid black;
}
.sns-wrap{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.sns-box{
    display: flex;
    flex-direction: column;
    align-items: center;
  
}
.sns-link img{
    width: 60px;
    margin-bottom: 10px;
    user-select: none;
    border-radius: 10px;
    overflow: hidden;
}
.sns-box p{
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    user-select: none;
    margin-bottom: 6px;
}
.sns-box a{
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
}
.footer{
    background-color: #2a2a2a;
    padding:30px 0;
    border: 1px solid black;
}
.footer-logo{
    max-width: 174px;
    margin: 0 auto;
    margin-bottom: 40px;
    user-select: none;
}
.caution{
    text-align: center;
    font-size: 24px; /* 20px에서 24px로 증가 */
    font-weight: 700;
    line-height: 32px; /* 28px에서 32px로 증가 */
    color: #f9f9f9;
    word-break: keep-all;
    user-select: none;
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'TmonMonsori', 'Pretendard', 'Roboto', 'Noto Sans KR', sans-serif;
}

@media screen and (max-width: 768px) {
    .caution {
        font-size: 18px; /* 15px에서 18px로 증가 */
        line-height: 24px; /* 18px에서 24px로 증가 */
    }
}

.fade-container {
    font-size: 24px;
    font-weight: bold;
    display: flex;
}

.fade-letter {
    opacity: 0;
    animation: fadeInOut 2s infinite alternate;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* fading 클래스에 애니메이션 속성 적용 */
.fading {
    animation: fade 1.5s infinite alternate; /* 1초마다 흐리게 되었다가 밝아지는 fade 애니메이션 적용 */
  }
  
/* fade 애니메이션의 상태 정의 */
@keyframes fade {
    0% { opacity: 1; } /* 시작 상태는 불투명 */
    100% { opacity: 0.5; } /* 마지막 상태는 50% 투명 */
}

/* fading 클래스의 자식 요소 중 n번째 요소에 애니메이션 딜레이 적용 */
.fading > :nth-child(n) {
    animation-delay: 0.5n s; /* 애니메이션 시작을 0.1n초 늦춤 */
}
  
  
/* blinking 클래스에 애니메이션 속성 적용 */
.blinking {
    animation: blink 1s ease-in-out infinite alternate; /* 0.5초마다 깜빡이는 애니메이션 적용 */
  }
  
  /* blink 애니메이션의 상태 정의 */
  @keyframes blink {
    0% { opacity: 1; } /* 시작 상태는 불투명 */
    100% { opacity: 0.5; } /* 마지막 상태는 투명 */
  }
  
  /* blinking 클래스의 자식 요소 중 홀수 번째 요소에 애니메이션 딜레이 적용 */
  .blinking > :nth-child(odd) {
    animation-delay: 0.5s; /* 애니메이션 시작을 0.25초 늦춤 */
  }
  

/* scale 클래스에 애니메이션 속성 적용 */
.scale {
    animation: zoom 1s infinite alternate; /* 1초마다 확대와 축소를 반복하는 zoom 애니메이션 적용 */
}

/* zoom 애니메이션의 상태 정의 */
@keyframes zoom {
    0% { transform: scale(1); } /* 시작 상태는 원래 크기 */
    100% { transform: scale(2); } /* 마지막 상태는 2배 크기 */
}
  
/* 공통 버튼 스타일 */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(90deg, #001f3f 0%, #4a90e2 100%);
    color: #f8faff;
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 31, 63, 0.25);
    border: none;
    cursor: pointer;
    margin-top: 1rem;
}

.btn-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 31, 63, 0.4);
    background: linear-gradient(90deg, #003366 0%, #6bb6ff 100%);
    color: #ffffff;
    text-decoration: none;
}

.btn-link:active {
    transform: translateY(0);
}

/* 반응형 버튼 스타일 */
@media screen and (max-width: 768px) {
    .btn-link {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
        max-width: 250px;
    }
}

@media screen and (max-width: 499px) {
    .btn-link {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
}

/* 성능 최적화를 위한 GPU 가속 */
@media screen and (min-width: 1024px) {
    .content-wrap {
        transform: translateZ(0);
        will-change: background;
    }
    
    .content-wrap::before,
    .content-wrap::after {
        transform: translateZ(0);
        will-change: background;
    }
}

@media screen and (max-width:991px){
    .container{
        padding: 0 3%;
    }
    .red-text{
        font-size: 38px;
    }
    .hd-con{
        height: 70px;
    }
    .content-wrap{
        padding-top:70px;
    }
    .banner1{
        padding:90px 0 40px;
        height: 590px;
    }
    .banner1 .title{
        font-size: 76px;
    }
    .banner1 .text{
        font-size: 34px;
    }
    .banner1 .bottom{
        bottom: 40px;;
    }
    .banner1 .bottom p{
        font-size: 38px;
    }
    .banner1 .bottom p strong{
        font-size: 38px;
    }
    .banner2{
        padding:50px 0 30px;
        height: 490px;
    }
    .banner2 .text{
        font-size: 38px;
    }
    .banner2 .bottom > p{
        font-size: 52px;
    }
    .call{
        margin-top: 30px;
    }
    .call p{
        font-size: 30px;
    }
    .section3{
        padding: 50px 0 20px;
    }
    .icon-box h5{
        font-size: 28px;
    }
    .icon-box p{
        font-size: 20px;
    }
    .sns-link p{
        font-size: 20px;
    }
}
@media screen and (max-width:768px){
    .container{
        padding:0 2%;
    }
    .red-text{
        font-size: 32px;
    }
    .mb-br{
        display: block;
    }
    .section1{
        background-position: center center;
        background-size: auto 100%;
    }
    .banner1{
        padding:60px 0 30px;
        height: 500px;
       
    }
    .banner1 .title{
        font-size: 45px;
    }
    .banner1 .text{
        font-size: 30px;
    }
    .banner1 .bottom{
        bottom: 30px;
    }
    .banner1 .bottom p{
        font-size: 25px;
        white-space: normal;
    }
    .banner1 .bottom p strong{
        font-size: 25px;
    }
    .banner2{
        padding:30px 0 30px;
        height: 440px;
    }
    .banner2 .text{
        font-size: 32px;
    }
    .banner2 .bottom > p{
        font-size: 44px;
    }
    .call p{
        font-size: 26px;
        line-height: 40px;
    }
    .call p strong::after{
        width: 6px;
        height: 6px;
        top:-4px;
    }
    .section3{
        padding: 30px 0 20px;
    }
    .icon-wrap{
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }
    .icon-box{
        width: 100%;
    }
    .icon-box img{
        height: 60px;
        margin-bottom: 16px;
    }
    .icon-box p{
        font-size: 18px;
        line-height: 24px;
    }
    .sns-box p{
        font-size: 18px;
    }
    .sns-box a{
        font-size: 20px;
    }
}
@media screen and (max-width:499px){
    .banner1 .title{
        word-break: keep-all;
    }
    .banner1 .text{
        word-break: keep-all;
    }
    .banner1 .bottom p{
        word-break: keep-all;
    }
    .banner2 .bottom > p{
       font-size: 40px;
       word-break: keep-all;
    }
    .sns-box{
        width: 33.3%;
    }
    .sns-box p{
        font-size: 15px;
    }
    .sns-box a{
        font-size: 17px;
    }
}

@media screen and (min-width: 1024px) {
    /* content-wrap에 핀테크/트레이딩 테마 배경 */
    .content-wrap{
        padding-top:70px;
        padding:0% 20%;
        position: relative;
        background: linear-gradient(135deg, #000000 0%, #0a0a1a 25%, #1a1a2e 50%, #0f1419 75%, #000000 100%);
        overflow: hidden;
    }
    
    /* 중앙 콘텐츠 영역 강조 */
    .content-wrap::before {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        right: 20%;
        bottom: 0;
        background: rgba(0, 150, 255, 0.02);
        pointer-events: none;
        z-index: 1;
    }
    
    /* 핀테크/트레이딩 테마 회전하는 그라디언트 도형들 */
    .content-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 15% 25%, rgba(0, 150, 255, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 85% 75%, rgba(0, 255, 100, 0.06) 0%, transparent 50%),
            radial-gradient(circle at 70% 20%, rgba(255, 50, 50, 0.05) 0%, transparent 40%),
            radial-gradient(circle at 30% 80%, rgba(255, 215, 0, 0.04) 0%, transparent 40%),
            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 30%);
        animation: floatShapes 30s ease-in-out infinite;
        pointer-events: none;
        z-index: 0;
    }
    
    /* 모든 섹션을 오버레이 위에 표시 */
    .section1, .section3, .footer {
        position: relative;
        z-index: 2;
    }
    
    /* 나머지 기존 코드 유지 */
    .section1{
        background-position: center center;
        background-size: cover;
    }
    .container{
        padding: 0 3%;
    }
    .red-text{
        font-size: 38px;
    }
    .hd-con{
        height: 70px;
    }
    .banner1{
        padding:120px 0 40px; /* 90px에서 120px로 증가 */
        height: 550px;
    }
    .banner1 .title{
        font-size: 76px;
    }
    .banner1 .text{
        font-size: 34px;
    }
    .banner1 .bottom{
        bottom: 40px;
    }
    .banner1 .bottom p{
        font-size: 38px;
    }
    .banner1 .bottom p strong{
        font-size: 38px;
    }
    .banner2{
        padding:50px 0 30px;
        height: 490px;
    }
    .banner2 .text{
        font-size: 38px;
    }
    .banner2 .bottom > p{
        font-size: 52px;
    }
    .call{
        margin-top: 30px;
    }
    .call p{
        font-size: 30px;
    }
    .section3{
        padding: 50px 0 20px;
    }
    .icon-box h5{
        font-size: 28px;
    }
    .icon-box p{
        font-size: 20px;
    }
    .sns-link p{
        font-size: 20px;
    }
}

/* 핀테크/트레이딩 테마 회전하는 그라디언트 도형 애니메이션 */
@keyframes floatShapes {
    0% {
        background: 
            radial-gradient(circle at 15% 25%, rgba(0, 150, 255, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 85% 75%, rgba(0, 255, 100, 0.06) 0%, transparent 50%),
            radial-gradient(circle at 70% 20%, rgba(255, 50, 50, 0.05) 0%, transparent 40%),
            radial-gradient(circle at 30% 80%, rgba(255, 215, 0, 0.04) 0%, transparent 40%),
            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 30%);
    }
    25% {
        background: 
            radial-gradient(circle at 70% 30%, rgba(0, 255, 100, 0.07) 0%, transparent 45%),
            radial-gradient(circle at 20% 70%, rgba(255, 50, 50, 0.08) 0%, transparent 55%),
            radial-gradient(circle at 80% 80%, rgba(0, 150, 255, 0.06) 0%, transparent 35%),
            radial-gradient(circle at 25% 15%, rgba(255, 215, 0, 0.05) 0%, transparent 45%),
            radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.03) 0%, transparent 25%);
    }
    50% {
        background: 
            radial-gradient(circle at 85% 75%, rgba(255, 50, 50, 0.09) 0%, transparent 50%),
            radial-gradient(circle at 15% 25%, rgba(0, 150, 255, 0.07) 0%, transparent 50%),
            radial-gradient(circle at 30% 80%, rgba(255, 215, 0, 0.06) 0%, transparent 40%),
            radial-gradient(circle at 70% 20%, rgba(0, 255, 100, 0.05) 0%, transparent 40%),
            radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.02) 0%, transparent 30%);
    }
    75% {
        background: 
            radial-gradient(circle at 30% 80%, rgba(255, 215, 0, 0.08) 0%, transparent 45%),
            radial-gradient(circle at 80% 20%, rgba(0, 255, 100, 0.07) 0%, transparent 55%),
            radial-gradient(circle at 20% 15%, rgba(0, 150, 255, 0.06) 0%, transparent 35%),
            radial-gradient(circle at 75% 85%, rgba(255, 50, 50, 0.04) 0%, transparent 45%),
            radial-gradient(circle at 45% 35%, rgba(255, 255, 255, 0.03) 0%, transparent 25%);
    }
    100% {
        background: 
            radial-gradient(circle at 15% 25%, rgba(0, 150, 255, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 85% 75%, rgba(0, 255, 100, 0.06) 0%, transparent 50%),
            radial-gradient(circle at 70% 20%, rgba(255, 50, 50, 0.05) 0%, transparent 40%),
            radial-gradient(circle at 30% 80%, rgba(255, 215, 0, 0.04) 0%, transparent 40%),
            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 30%);
    }
}

/* 성능 최적화를 위한 GPU 가속 */
@media screen and (min-width: 1024px) {
    .content-wrap {
        transform: translateZ(0);
        will-change: background;
    }
    
    .content-wrap::before,
    .content-wrap::after {
        transform: translateZ(0);
        will-change: background;
    }
}