.main-top-side {--value: 24px;  border-radius: 40px;}
.btn-swiper-pause {width: 32px; height: 32px; background: url(../img/paused.svg) no-repeat 50% 50% / 26px auto;  -ms-flex-negative: 0; flex-shrink: 0;  border-radius: 100%; margin-left:10px;}
.btn-swiper-pause.paused {background-image: url(../img/play.svg);}

h2.title {position:relative; display:flex; flex-direction:column; align-items: center; margin-bottom:60px;}
h2.title p {font-size:45px; line-height: 1.2;}
h2.title small {font-size:18px; color:#999; font-weight:200;} 
h2.title a {margin-left:auto;}

@media(max-width: 991.98px) {
    h2.title {margin-bottom:40px;}
    h2.title p {font-size:40px;}
    h2.title small {font-size:15px; margin-top:10px;}
}

@media(max-width: 575.98px) {
    h2.title {margin-bottom:20px;}
    h2.title p {font-size:32px;}
    h2.title small {font-size:14px; margin-top:0;}
    h2.title a {position: absolute; right: 0; top: 10px; font-size: 0; padding: 15px;}
    h2.title a i {margin-left:0px;}
}

/* main */
.main {margin-top:1rem;}

.card {width: 100%; height: 100%; border-radius: calc(max(1rem, 0.8334vw) * (40 / 16)); position: relative; z-index: 100; color: #fff; transition:all .4s;}
.card a {width: 100%; height: 100%}
.card__wrapper {background: var(--bg-color, #002281); border-radius: calc(max(1rem, 0.8334vw) * (40 / 16));
 height: 100%; width: 100%; overflow: hidden; position:absolute; transform: translate3d(0, 0, 0)}
.card .v-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;   border-radius: calc(max(1rem, 0.8334vw) * (40 / 16))}
.card .content {position: relative; padding-top: calc(max(1rem, 0.8334vw) * (56 / 16)); padding-left: calc(max(1rem, 0.8334vw) * (72 / 16)); padding-right: calc(max(1rem, 0.8334vw) * (72 / 16))}
.card .tag {display: inline-flex; align-items: center; color: #fff; background: #000; padding: 3px 1rem;
 border-radius: 30px; font-size:.88rem;}
.card .tit {padding-top: calc(16 / 34 * 1em); padding-bottom: calc(16 / 34 * 1em); color:#fff}
.card .img-content {position: absolute; object-fit: contain; right: 5%; bottom: 0; aspect-ratio: 1}
.card .ticker {line-height: 1.2}
.card .caution {margin-top: calc(max(1rem, 0.8334vw) * (5 / 16)); line-height: 1.2}

.card--s .content {max-width: calc(max(1rem, 0.8334vw) * (510 / 16)); padding-left: calc(max(1rem, 0.8334vw) * (60 / 16)); padding-right: calc(max(1rem, 0.8334vw) * (60 / 16))}
.card--s .tit {font-size: max(1.7rem,1vw); line-height: 1.3; font-weight: 600}
.card--s .desc {font-size: max(.9rem,.8896vw); line-height: 1.4; font-weight: 200; opacity: 0.8;}
.card--s .ticker {font-size: max(1.3rem,.8896vw)}

.main-slide .swiper-wrapper {position: relative; height: max(30rem, 58vh)}
.main-slide.swiper  {position: relative; height: 100%; width: 100%; top: 0; left: 0;}
.main-slide.swiper .card {transform: translateX(0); will-change: transform}
.main-slide.swiper .card:hover {transform: scale(0.98);}

@media(max-width: 1199.98px) {
  .main {margin-top:0;}
}

@media(max-width: 575.98px) {
  .card--s .content {padding-left: calc(max(1rem, 0.8334vw) * (45 / 16));
    padding-right: calc(max(1rem, 0.8334vw) * (45 / 16)); padding-top: calc(max(1rem, 0.8334vw) * (45 / 16));}
  .card--s .tit {font-size: max(1.8rem, 1.7708vw);}
  .card--s .desc {font-size: max(.9rem, .8896vw);}
  .card .img-content {width:65%;}
  .card .tag {font-size:.85rem}
}


/*  추천펀드  */
.chart__wrap {display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(17, 17, 17, .16); border-radius: calc(max(1rem, 0.8334vw) * (30 / 16)); padding: calc(max(1rem, 0.8334vw) * (28 / 16)) calc(max(1rem, 0.8334vw) * (30 / 16)); height: 100%;}
.chart__wrap:hover {border-color:#000}
.chart__wrap .info {display:flex;justify-content: space-between; align-items: center; width: 100%;}
.chart__wrap .info ul {display:flex;}
.chart__wrap .info ul li {padding:5px 8px; border:1px solid #ddd;font-size: 13px;line-height: 1.2;}
.chart__wrap .info ul li+li {border-left:none;}
.product-icon {
    display: inline-block;
    position: relative;
    width: calc(max(1rem, 0.8334vw) * (64 / 16));
    height: calc(max(1rem, 0.8334vw) * (64 / 16))
}
.product-icon.md {
    width: calc(max(1rem, 0.8334vw) * (48 / 16));
    height: calc(max(1rem, 0.8334vw) * (48 / 16));
}
.product-icon .icon-big {
    position: relative;
    height: 100%;
    aspect-ratio: 1;
    font-size: 0;
    border-radius: 50%;
}
.product-icon .icon-big img {
    position: relative;
    height: 100%;
    width: auto;
}
.chart__wrap .product-tit {display: block; margin-top: calc(15 / 21 * 1em); margin-bottom: calc(8 / 21 * 1em); word-break: break-word;  font-size:var(--fz); font-weight:700; min-height: 65px;}
.chart__wrap .product-desc {color: #767676; margin-bottom: .5em; font-size:var(--fz); overflow: hidden; text-overflow: ellipsis; width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.chart__wrap .content {width: 100%; text-align: right; margin-top: calc(max(1rem, 0.8334vw) * (28 / 20));}
.chart__wrap .content dl {display: flex; flex-wrap: wrap; align-items: center;}
.chart__wrap .content dl dt,.chart__wrap .content dl dd {width: 50%; font-size:15px;}
.chart__wrap .content dl dt {text-align: left; font-weight: 400; color: #999;}
.chart__wrap .content dl dt:nth-of-type(2), .chart__wrap .content dl dd:nth-of-type(2) {margin-top: calc(5 / var(--fz) * 1em); margin-bottom: calc(10 / var(--fz) * 1em)}
.chart__wrap .content dl dd.idx {font-size:1.8rem; font-weight:600}

.risk1 {color:#fff; background:#ea0e00; border-color:#ea0e00 !important}
.risk2 {color:#fff; background:#ec5412; border-color:#ec5412 !important}
.risk3 {color:#fff; background:#ef6211; border-color:#ef6211 !important}
.risk4 {color:#000; background:#f1ae02; border-color:#f1ae02 !important}
.risk5 {color:#000; background:#49a62c; border-color:#49a62c !important}
.risk6 {color:#fff; background:#0d6b94; border-color:#0d6b94 !important}

/* 뉴스룸 */
.main-news {padding:5rem 0 2rem;}
.card-item {transition:all .4s;}
.card-item:hover {transform:scale(0.98);}
.card-item a {background:#fff; overflow: hidden}
.card-item .img-wrap {
    aspect-ratio: 16/7;
    overflow: hidden;
    position: relative;
    border-top-left-radius: calc(max(1rem, 0.8334vw) * (30 / 16));
    border-top-right-radius: calc(max(1rem, 0.8334vw) * (30 / 16));
    border: 1px solid rgba(97,102,118,.1)
}
.card-item .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.card-item .content {
    padding: calc(max(1rem, 0.8334vw) * (10 / 8)) calc(max(1rem, 0.8334vw) * (32 / 16));
    border-bottom-left-radius: calc(max(1rem, 0.8334vw) * (30 / 16));
    border-bottom-right-radius: calc(max(1rem, 0.8334vw) * (30 / 16));
    background-color: #fff
}
.card-item .tit {white-space: pre-wrap; font-size:1.1rem; font-weight:500; line-height:1.2; width:100%; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.card-item .sub {font-size:.85rem; font-weight:400; padding:.5rem 0 1rem; color:#9D9D9D}
.card-item .sub em {padding:0 .8rem; color:#E3E3E3}
.card-item .sub .name {font-weight:500; color:#006EAB}


.swiper .indicator {margin-top: max(3rem,2.7778vh); margin-bottom: max(2.4rem,3.3333vh); display: flex; flex-wrap: nowrap; justify-content: center; position:relative;}

.swiper .swiper-button-prev, .swiper .swiper-button-next {height:22px; width:22px; position:relative; left:auto; right:auto; margin:0;}
.swiper .swiper-button-prev:after, .swiper .swiper-button-next:after {display: none;}
.swiper .swiper-button-next {background:url(../img/slide-next.svg) no-repeat;} 
.swiper .swiper-button-prev {background:url(../img/slide-prev.svg) no-repeat;}

.swiper .swiper-pagination {position:relative;  width:auto !important; padding:0 1rem; bottom:auto;}
.swiper .swiper-pagination .swiper-pagination-bullet {width:12px; height:12px; margin:2px 10px; border-radius:6px}
.swiper .swiper-pagination .swiper-pagination-bullet-active {background:#000; width:30px;}

@media(max-width: 575.98px) {
  .swiper .swiper-pagination .swiper-pagination-bullet {width:10px; height: 10px; margin:2px 6px;}
  .swiper .swiper-pagination .swiper-pagination-bullet-active {width:20px;}
}


.main-top-search {position:relative; height:80px; border-radius:30px; padding:20px 40px; background:var(--basic); display:flex; align-items: center; justify-content: space-between; color:#fff;}
.main-top-search form {width:80%;}
.main-top-search .form_inner {position: relative; width: 100%;}
.main-top-search .form_inner input[type=text] {width: 100%; height: 40px; font-size: 17px; color:#fff; border:none;}
.main-top-search .form_inner .submit {position: absolute; top: 0; right: 0; width: 26px; height: 26px;}
.main-top-search .form_inner .submit input[type=submit] {width: 100%; height: 100%; border: none; background-image: url(./../img/all_search.svg); background-position: center; background-repeat: no-repeat; font-size: 0;}


/* 카운트다운 */
.main-info {text-align:center; background:url(../img/main_info_bg.png) right bottom no-repeat; background-size: contain; padding:calc(max(2.5rem, 0.8334vw) * (30 / 16)) 0;}
.main-info h3 {font-size:2.2rem; margin-bottom:4rem;}
.main-info ul {display:flex; width:100%; justify-content: space-around; align-items: flex-end; gap: 10px;}
.main-info ul li {width: 33.3333%;}
.main-info ul li figure img {width: 200px;}
.main-info ul li small {font-size:0.9rem; margin-top:15px; color: #777; display:block}
.main-info ul li p {font-size:2rem; color:#000}

@media(max-width: 767.98px) {
  .main-info h3 {font-size: 1.6rem; line-height: 1.4; margin-bottom:2rem;}
  .main-info ul li figure img {width:120px;}
  .main-info ul li p {font-size: 1.8rem;}
}

@media(max-width: 575.98px) {
  .main-info ul {flex-direction: column; align-items: center;}
  .main-info ul li {width:100%;}
  .main-info ul li p {font-size: 1.5rem;}
}



/* 공지사항 */
.main_board {padding:2rem 0 3rem}
.main_board > ul {position:relative; overflow:hidden; display:flex; justify-content: space-between; flex:1 auto; }
.main_board > ul > li {background-color:#fff; border-radius:30px; position:relative; padding: calc(max(1rem, 0.8334vw) * (20 / 8)) calc(max(1rem, 0.8334vw) * (32 / 12)); width:49%;}
.main_board > li > h3 {margin-bottom:1.2rem;}

.notice-list {flex: 1; margin-top:calc(max(1rem, 0.8334vw) * (10 / 9));}
.notice-list li:last-child a {border-bottom:0 ;}
.notice-item a {display: flex; align-items: center; padding: calc(max(1rem, 0.8334vw) * (15 / 20)); border-bottom: 1px solid #eee; gap:20px;}
.notice-item .tit {flex: 1; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice-item .date {color: #AFAFAF; font-size:14px; font-weight:400;}
.notice-item:hover a {background-color: rgba(235,238,242,.5)}

.next-btn {position: absolute; right:40px; top:40px; width: 40px; height:40px; border-radius:50%; background:url(../img/slide-next.svg) center no-repeat #000; }
.next-btn:hover, .next-btn:active {background-color: #fff; border: 1px solid #afafaf;}

@media(max-width: 991.98px) {
  .main_board > ul {flex-direction: column;}
  .main_board > ul > li {width:100%;}
  .main_board > ul > li+li {margin-top:1rem;}
}

@media(max-width: 575.98px) {
  .main_board > ul > li {padding: calc(max(1rem, 0.8334vw) * (15 / 8)) calc(max(1rem, 0.8334vw) * (20 / 12));}
  .main_board > ul > li h3 p {font-size:1.55555rem; padding-left:10px;}
  .next-btn {right: 30px; top: 30px; width: 35px; height: 35px;}
  .notice-list {margin-top:.7rem;}
}

/* 메인 검색 */
.main_search {display: flex; flex:1 auto; margin:2rem auto 8rem; width:70%}
.main_search .search-title {width: 320px; background: #000; border-radius: 2rem 0 0 2rem; display: flex; align-items: center; color: #fff; line-height: 1.8; font-size: 1.1rem; padding-left: 2rem;}
.main_search .search-container {backdrop-filter: blur(25px); border-radius: 3rem; background: #fff; border: calc(clamp(1.6rem, 4.5vw, 2.4rem) * (2 / 24)) solid #000; padding-top: 0; padding-bottom: 0; padding-left: calc(0 / 18 * 1em); margin-left: -30px; width: calc(100% - 270px);}
.main_search .search-inline {display:flex;}
.main_search .input-main-search {background-color: rgba(0, 0, 0, 0); border: none; height: 3.5rem; color: #222; font-size: 1rem; padding: 1rem 4rem 1rem 2rem; width:100%; border-radius: 3rem; outline:none;}
.main_search .input-main-search:focus {outline:none;}
.main_search .search-btn {position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 3rem; height: 3rem;    cursor: pointer; border-radius:50%;}
.main_search .search-btn span {background:url(../img/main_search.svg) center no-repeat; background-size:60%; font-size:0; width: 100%;height: 100%; display: block;}
.main_search .search-btn:hover, .main_search .search-btn:active {background-color:#000;}  
.main_search .search-btn:hover span, .main_search .search-btn:active span {background-image:url(../img/main_search_on.svg)}  

@media(max-width: 1439.98px) {
  .main_search {width:100%;}
}

@media(max-width: 767.98px) {
  .main_search {margin: 1rem 0 5rem; flex-direction: column;}
  .main_search .search-title {width:100%;border-radius: 2rem 2rem 0 0;height: 75px; padding-bottom: 20px;}
  .main_search .search-container {width:100%; margin-left:0; margin-top: -25px;}
}