@import url("/etude/assets/fonts/Pretendard/Pretendard-Regular.woff2");
@import url("/etude/assets/fonts/Pretendard/Pretendard-Bold.woff2");
@import url("/etude/assets/fonts/Pretendard/Pretendard-Light.woff2");
@import url("/etude/assets/fonts/Pretendard/Pretendard-ExtraBold.woff2");
@import url("/etude/assets/fonts/Pretendard/Pretendard-ExtraLight.woff2");

@font-face{
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/etude/assets/fonts/Pretendard/Pretendard-Regular.woff2') format('woff2-variations');
}
body{
    font-family: "Pretendard", sans-serif;
    color:#333;
}

footer{
    margin-top:50px;
    padding-top:15px;
    font-size: 0.95em;
    background: rgba(48, 60, 72);
    color: #ffffff;
    _border-top:10px solid rgba(60,80,150) !important;
    _background:rgb(242,245,255);
    _border-bottom: 100px solid rgb(60, 80, 150);
}


/*
section.first-section{
    padding-top:12rem;
    padding-bottom:6rem;
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center center;
    background: linear-gradient(to bottom, rgba(49, 49, 49, 0.8) 0%, rgba(23, 83, 173, 0.8) 100%), url("/etude/assets/images/bg-stock-d2.jpg");
    
}

.navbar-brand{
    font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
}


*/

.jumbotron{
    _background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 179, 108, 0.8) 100%), url("/etude/assets/images/K1.png");
    _background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%), url("/etude/assets/images/K3.png");
    _background: linear-gradient(to bottom, rgba(216, 219, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%), url("/etude/assets/images/n7.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center center;
}

.jumbotron.n1{
    background-image: url("/etude/assets/images/n1.webp");
    position:relative;
}
.jumbotron.n2{
    background-image: url("/etude/assets/images/n2.webp");
    position:relative;
}
.jumbotron.n3{
    background-image: url("/etude/assets/images/n3.webp");
    position:relative
}
.jumbotron.n4{
    background-image: url("/etude/assets/images/n4.webp");
    position:relative;
}
.jumbotron.n5{
    background-image: url("/etude/assets/images/n5.webp");
    position:relative
}
.jumbotron.n6{
    background-image: url("/etude/assets/images/n9.webp");
    position:relative
}
.jumbotron.n7{
    background-image: url("/etude/assets/images/n10.webp");
    position:relative
}
.jumbotron::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(216, 219, 255, 0.3) 0%, rgba(255, 255, 255, 1) 100%);
    _pointer-events: none; /* 클릭 방해 방지 */
    z-index:0;
}
.jumbotron h1{
    position:relative;
    z-index:1;
}
/*.jumbotron .h1::before{
    background: rgba(255, 255, 255, 0.7);
    inset:0;
    content:"";
    position:absolute;
}*/
.jumbotron2{
    background: linear-gradient(to bottom, rgba(216,219, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 100%), url("/etude/assets/images/n1.webp");
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center center;
}
.jumbotron2 .main-c{
    background: rgba(255, 255, 255, 0.5);
    /* 격자무늬 생성 (선형 그라데이션 활용) */
    background-image: 
        linear-gradient(45deg, transparent 49%, rgba(60,80,150,0.2) 49%, rgba(60,80,150,0.2)  51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(60,80,150,0.2) 49%, rgba(60,80,150,0.2)  51%, transparent 51%);
        /*linear-gradient(45deg, rgba(0, 0, 0, 0.8) 1px, transparent 1px), /* 가로선 */
        /*linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 1px, transparent 1px); /* 세로선 */
        /*linear-gradient(45deg, rgba(200, 200, 200, 0.5) 25%, transparent 25%, transparent 75%, rgba(200, 200, 200, 0.5) 75%, rgba(200, 200, 200, 0.5));
        _linear-gradient(-45deg, rgba(200, 200, 200, 0.5) 25%, transparent 25%, transparent 75%, rgba(200, 200, 200, 0.5) 75%, rgba(200, 200, 200, 0.5));*/

    /* 격자 크기 조절 (20px x 20px) */
    background-size: 10px 10px;

    /* 격자가 너무 구석에 몰리지 않게 중앙 정렬 */
    background-position: center;

    word-break:keep-all;
}
.jumbotron2 .main-c2{
    _font-size: calc(0.5rem + 1vw);
}

.main_section1{

}
.main_section2{
    _background:#f0f6fa;
}
.cs span{
    width:60px;
    display:inline-block;
}

.sub-c{
    /* 위(0%)는 투명, 중간(20%~80%)은 하양, 아래(100%)는 투명 */
    background: radial-gradient(
    ellipse at center, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.5) 10%, 
    rgba(255, 255, 255, 0) 70%
    );

    /* 테두리 각진 느낌을 아예 죽이려면 배경 크기를 살짝 줄이는 것도 방법이야 */
    background-repeat: no-repeat;
    background-size: 100% 90%; /* 높이를 90%만 써서 위아래 여백을 강제로 만듦 */
    background-position: center;
  
}

.no-link-effect{
    text-decoration: none;
    color: inherit;   
}

.icon-box .icon-box-icon {
    font-size: 2.375rem;
    margin: 0 0 10px;
    color: rgb(60, 80, 150);
    transition: all 0.3sease-in-out;
}

.icon-box .icon-box-title h6 {
    margin: 0 0 12px;
    font-weight:700;
}
.icon-box .icon-box-content{
    word-break: keep-all;
}

.text-light{
    color:#788487;
}

.brand-color{
    background-color:rgb(60, 80, 150);
}
.brand-color2{
    background-color:rgb(255, 140, 0);
}
.brand-color3{
    background-color:rgb(184, 134, 11);
}

.word-keep{
    word-break: keep-all;
}


.service .icon-arrow{
    font-size: 2.375rem;
    margin: 0 0 10px;
    color: rgb(60, 80, 150);
    transition: all 0.3sease-in-out;
}



/* 기본 스타일 */
ul.pagination {
    margin: 20px 0;
    text-align: center;
}

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {
    display: inline;
    margin: 0 5px;
}

ul.pagination li a {
    color: rgb(60, 80, 150);
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
}

ul.pagination li a:hover {
    background-color: #f1f1f1;
}

ul.pagination li.active a {
    background-color: rgb(60, 80, 150);
    color: white;
    border-color: rgb(60, 80, 150);
}

ul.pagination li.disabled a {
    color: #ccc;
    pointer-events: none;
    cursor: default;
}


@media screen and (max-width: 574px){
    .main-text{
        font-size:calc(1.425rem + 1.1vw)
    }
    /*.main-text2{
       
    }*/
}



.btn.active {
  _filter: brightness(90%); /* 전체적으로 조금 어둡게 */
  _box-shadow: 0 0 5px rgba(0,0,0,0.3); /* 공통 효과 */
  border-bottom:3px solid #000;
}

.btn-buy {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff6666;
  --bs-btn-border-color: #ff6666;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ac0000;
  --bs-btn-hover-border-color: #ac0000;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ff6666;
  --bs-btn-active-border-color: #ff6666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ff6666;
  --bs-btn-disabled-border-color: #ff6666;
}
.btn-sell {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6666ff;
  --bs-btn-border-color: #6666ff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0000ac;
  --bs-btn-hover-border-color: #0000ac;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6666ff;
  --bs-btn-active-border-color: #6666ff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #6666ff;
  --bs-btn-disabled-border-color: #6666ff;
}
.btn-stock {
  --bs-btn-color: #fff;
  --bs-btn-bg: #666666;
  --bs-btn-border-color: #666666;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #444444;
  --bs-btn-hover-border-color: #444444;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #666666;
  --bs-btn-active-border-color: #666666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #666666;
  --bs-btn-disabled-border-color: #666666;
}
.btn-market {
  --bs-btn-color: #fff;
  --bs-btn-bg: #336633;
  --bs-btn-border-color: #336633;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #224422;
  --bs-btn-hover-border-color: #224422;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #336633;
  --bs-btn-active-border-color: #666666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #666666;
  --bs-btn-disabled-border-color: #666666;
}
.btn-outline-market {
  --bs-btn-color: #336633;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #336633;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #336633;
  --bs-btn-hover-border-color: #224422;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #336633;
  --bs-btn-active-border-color: #666666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #666666;
  --bs-btn-disabled-border-color: #666666;
}
.btn-hold {
  --bs-btn-color: #fff;
  --bs-btn-bg: #b98d2f;
  --bs-btn-border-color: #b98d2f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a97d1f;
  --bs-btn-hover-border-color: #a97d1f;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b98d2f;
  --bs-btn-active-border-color: #666666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #666666;
  --bs-btn-disabled-border-color: #666666;
}
.btn-outline-hold {
  --bs-btn-color: #b98d2f;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #b98d2f;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #b98d2f;
  --bs-btn-hover-border-color: #a97d1f;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #b98d2f;
  --bs-btn-active-border-color: #666666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #666666;
  --bs-btn-disabled-border-color: #666666;
}

.btn-outline-buy {
  --bs-btn-color: #ff6666;
  --bs-btn-border-color: #ff6666;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff6666;
  --bs-btn-hover-border-color: #ff6666 ;
  --bs-btn-focus-shadow-rgb: 244, 98, 58;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ff6666;
  --bs-btn-active-border-color: #ff6666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ff6666;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ff6666;
  --bs-gradient: none;
}
.badge-buy{
    background-color: #ff6666;
}
.badge-sell{
    background-color: #4666ff;
}
.badge-target{
    background-color: #666666;
}
.badge-market{
    background-color: #fff;
    border-bottom: 1px solid #336633;
    border-right: 1px solid #336633;
    color: #336633;
}
.badge-hold{
    background-color: #fff;
    border-bottom: 1px solid #b98d2f;
    border-right: 1px solid #b98d2f;
    color: #b98d2f;
}
.badge-stock{
    background-color: #666666;
}

.stock .title.buy ,.stock .article.buy {
    border-top:3px solid #ff6666 !important;
    _border-bottom:3px solid #ff6666 !important;
    _background-color: #ffb0b0;
}
.stock  .title.sell{
    border-top:3px solid #4466ff !important;
    _background-color: #c0e0ff;
}
.stock  .title.stock{
    border-top:3px solid #666666 !important;
    _background-color: #eeeeee;
}
.stock  .title.market{
    border-top:3px solid #336633 !important;
    _background-color: #d0efd0;
}
.stock  .title.hold{
    border-top:3px solid #b98d2f !important;
    _background-color: #f9dd8f;
}
.stock  table tr td{
    word-break: keep-all;
}
.stock img{
    max-width:100%;
}
.fs-09{
    font-size: 0.9rem !important;
}
.fs-08{
    font-size: 0.8rem !important;
}

@media (max-width: 767.98px) {
    .jumbotron2 .main-c2{
        font-size:0.9em;
    }
    .nav-underline .nav-link{
        font-size:0.95em;
    }
    .nav-underline{
        --bs-nav-underline-gap: 0.9rem !important;
    }
}