@charset "utf-8";

/*-------------------------------------------------------------------
@ TEMPLATE UI : 2024.04.01 J.G.H
-------------------------------------------------------------------*/

/*# sourceMappingURL=content.css.map */
#container.view {
position: relative;
width: 100%; 
height: 100%;
padding-top: 0;
}

/* 투자상품 검색 */
#searchForm + .ui_tabs1 {margin-top: 120px;}
.search-product {
z-index: 10;
position: relative;
width: 100%;
max-width: 1490px;
height: 10rem;
margin: 0 auto;
}
.search-product + #tabs {margin: 150px 0 0;}
.search-product > .conts {
overflow: hidden;
position: absolute;
top: 0; right: 70px;
width: calc(100% - 70px);
height: 6rem;
background: #1C3E70;
border-radius: 3.5rem;
transition: all 0.5s ease;
transform: translateY(0);
}
.search-product.open > .conts {
position: absolute;
top: 0; right: 7rem;
height: 834px;
padding-top: 1rem;
border-radius: 2.5rem;
box-sizing: content-box;
transform: translateY(-1.5rem);
box-shadow: 0 30px 30px rgba(112, 137, 173, 0.3);
}
.search-product .search {
display: flex;
align-items: center;
position: relative;
width: 100%;
max-width: 1430px;
height: 6rem;
margin-right: auto;
}
.search-product .search::after {
content: '';
display: block;
position: absolute;
bottom: 0; left: 3rem;
width: calc(100% - 6rem);
height: 1px;
background: rgba(255, 255, 255, 0.1);
}
.search-product .search .txtInput {
width: calc(100% - 130px);
height: 100%;
margin: 0 0 0 3rem;
padding: 0 2.4rem 0 0;
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
line-height: 32px;
outline: 0;
}
.search-product .search .txtInput::placeholder {color: rgba(255, 255, 255, 0.5);}
.search-product .search .btnDel {display: none; width: 20px; height: 20px; font-size: 0; line-height: 0; text-indent: -99999em;
  background: url('/magi/assets/images/common/btn_delete02.png') no-repeat center center / 15px 15px;
}
.search-product .search .btnSearch {
width: 2.3rem;
height: 2.3rem;
margin: 0 3rem 0 auto;
background: url('/magi/assets/images/common/btn_search02.png') no-repeat center center;
font-size: 0;
text-indent: -99999em;
line-height: 0;
}
.search-product .btnFilter {
position: absolute;
top: 0; right: 0;
width: 6rem;
height: 6rem;
background: url('/magi/assets/images/common/btn_filter_open.png') no-repeat center center;
font-size: 0;
text-indent: -99999em;
line-height: 0;
}
.search-product .btnFilter.is-open {background: url('/magi/assets/images/common/btn_filter_close.png') no-repeat center center;}
.search-product .keyword {position: absolute; bottom: 0; left: 0;}
.search-product .keyword a,
.search-product .keyword span {
  display: inline-block;
  margin: 0 0 0 2rem;
  color: #1C3E70;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  line-height: 2.4rem;
}
.search-product .filter {
  display: none;
  width: 100%;
  max-width: 1340px;
  z-index: 10;
  position: relative;
  padding: 5rem 0 0 9rem;
  background: #1C3E70;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.search-product.open .filter {display: block;}
.search-product .filter .tit {
margin: 2.5rem 0 0;
color: #FF9D4A;
font-weight: 700;
font-size: 20px;
text-align: center;
line-height: 32px;
}
.search-product .filter .item {
width: 100%;
padding: 60px 0 0;
}
.search-product .filter .item h3 {
color: #fff;
font-weight: 700;
font-size: 16px;
line-height: 2.4rem;
}
.search-product .filter .item ul {
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: normal;
width: 100%;
padding-top: 10px;
}
.search-product .filter .item ul > li {position: relative; margin: 10px 10px 0 0; font-size: 0; line-height: 0;}
.search-product .filter .item ul > li:nth-child(9) {margin-right: 0;}
.search-product .filter .item .mg {margin: 4.5rem 0 0;}
.search-product .filter .item .typeC > li {position: relative; margin: 5rem 5.5rem 0 0;}
.search-product .filter .typeA {display: flex;}
.search-product .filter .typeA [type="radio"] {position: absolute; width: 120px; height: 40px;}
.search-product .filter .typeA [type="radio"] + label {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 120px;
height: 40px;
background: #1C3E70;
border: 1px solid #49648C;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.search-product .filter .typeA [type="radio"]:checked + label {background: #BA6A33; color: rgba(255, 255, 255, 1);font-weight:bolder;border:none;font-size:16px;}
.search-product .filter .typeA [type="radio"] + label::after,
.search-product .filter .typeA [type="radio"]:checked + label::after {
content: '';
z-index: -1;
display: block;
position: absolute;
top: -1px; left: -1px;
width: 12rem;
height: 4rem;
}
.search-product .filter .typeB {display: flex;}
.search-product .filter .item [type="checkbox"] {position: absolute; width: 120px; height: 40px;}
.search-product .filter .typeB [type="checkbox"] + label {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 12rem;
height: 4rem;
background: #103367;
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.search-product .filter .typeB [type="checkbox"]:checked + label {background: #4975B5; color: rgba(255, 255, 255, 1); font-weight: 500;font-size:16px;}
.search-product .filter .typeB [type="checkbox"] + label::after,
.search-product .filter .typeB [type="checkbox"]:checked + label::after {
content: '';
z-index: -1;
display: block;
position: absolute;
top: -1px; left: -1px;
width: 12rem;
height: 4rem;
}
.search-product .filter .typeC {display: flex;}
.search-product .filter .typeC [type="checkbox"] {width: 75px; height: 100px;}
.search-product .filter .typeC [type="checkbox"] + label {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 7.5rem;
height: auto;
padding: 8rem 0 0;
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.search-product .filter .typeC [type="checkbox"] + label::after {
content: '';
display: block;
position: absolute;
top: -1px; left: -1px;
width: 7.5rem;
height: 7.5rem;
background-color: #103367;
border-radius: 50%;
}
.search-product .filter .item .typeC > li i {
  content: '';
  display: block;
  clear: both;
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background-position: center -80px;
  background-repeat: no-repeat;
  background-size: 100% 160px;
  cursor: pointer;
}
.search-product .filter .item .typeC > li:active i,
.search-product .filter .item .typeC > li:focus i {background-position: center -120px !important;}
.search-product .filter .typeC [type="checkbox"]:checked + label + i {background-position: center -120px !important;}
.search-product .filter .typeC [type="checkbox"]:checked + label {color: rgba(255, 255, 255, 1);font-size:16px;}
.search-product .filter .typeC [type="checkbox"]:checked + label::after {background-color: #4975B5 !important;}
.search-product .filter .typeC [type="checkbox"]:checked + label::before {background-position: center -40px;}
.search-product .filter .item .typeB [type="checkbox"]:checked + label[for="fundRiskGrade1"] {background-color: #D61918;}
.search-product .filter .item .typeB [type="checkbox"]:checked + label[for="fundRiskGrade2"] {background-color: #E44D14;}
.search-product .filter .item .typeB [type="checkbox"]:checked + label[for="fundRiskGrade3"] {background-color: #E07801;}
.search-product .filter .item .typeB [type="checkbox"]:checked + label[for="fundRiskGrade4"] {background-color: #B4910A;}
.search-product .filter .item .typeB [type="checkbox"]:checked + label[for="fundRiskGrade5"] {background-color: #0FAA53;}
.search-product .filter .item .typeB [type="checkbox"]:checked + label[for="fundRiskGrade6"] {background-color: #008805;}

/* 목록 검색 필터 버튼 */
.search-product .flex-btn {
display: none;
justify-content: center;
width: 100%;
max-width: 1340px;
margin: 120px auto 0;
padding: 0 35px;
}
.search-product.open .flex-btn {display: flex;}
.search-product .flex-btn button {height: 6.4rem; border-radius: 0.6rem; color: #fff;}
.search-product .flex-btn button + button {margin: 0 0 0 1rem;}
.search-product .flex-btn .btnSearch {
width: 100%;
max-width: 92.9rem;
background: #DF6D1B;
font-weight: 700;
font-size: 20px;
line-height: 32px;
}
.search-product .flex-btn .btnSearch span {
display: inline-block;
margin: 0 0 0 0.5rem;
font-weight: 400;
font-size: 14px;
line-height: 32px;
letter-spacing: 0;
vertical-align: top;
}
.search-product .flex-btn .btnSearch span span {margin: 0;}
.search-product .flex-btn .btnInitial {
width: 100%;
max-width: 31.9rem;
background: #2F5792;
font-weight: 700;
font-size: 16px;
line-height: 2.4rem;
}

/* 투자상품 > 테마상품관 */
#container.theme {padding: 280px 0 200px; background-color: #193C70;}
#container.theme .content-tit {color: #fff;}
.list-theme {
min-width: calc(min(80rem, 56.7376vw));
width: 100%;
max-width: 1410px;
margin: 7.5rem auto 0;
}
.list-theme .flex {display: flex; flex-wrap: wrap; width: calc(100% + 2rem);}
.list-theme .flex > a {
display: block;
position: relative;
min-width: 19.5rem;
width: calc(min(34rem, 24.1135vw));
max-width: calc(100% / 4);
min-height: 40rem;
height: 31.9149vw;
max-height: 45rem;
margin: 0 calc(min(1.5rem, 1.0638vw)) calc(min(1.5rem, 1.0638vw)) 0;
padding: 100px 0 0;
background: #fff;
background-size: 0;
background-repeat: no-repeat;
background-position: center center;
border-radius: 2rem;
text-align: center;
transition: all 0.2s ease;
}
.list-theme .flex > a:nth-child(2),
.list-theme .flex > a:nth-child(4),
.list-theme .flex > a:nth-child(5),
.list-theme .flex > a:nth-child(7),
.list-theme .flex > a:nth-child(10),
.list-theme .flex > a:nth-child(12),
.list-theme .flex > a:nth-child(13),
.list-theme .flex > a:nth-child(15) {background-color: #ECF1F9;}
.list-theme .flex > a:nth-child(odd):hover {
transform: translateY(-10px);
background-size: 100% 100%;
background-color: transparent;
background: linear-gradient(to bottom right, #245A8F, #193D71);
}
.list-theme .flex > a:nth-child(even):hover {
transform: translateY(-10px);
background-size: 100% 100%;
background-color: transparent;
background: linear-gradient(to bottom right, #22678A, #193D71);
}

.list-theme .flex > a::after {
content: '';
display: none;
clear: both;
position: absolute;
top: 10rem; left: 50%;
transform: translateX(-50%);
width: 8.4rem;
height: 8.4rem;
background-position: center center;
background-repeat: no-repeat;
}
.list-theme .flex > a > i {
content: '';
display: block;
clear: both;
position: absolute;
top: 100px; left: 50%;
transform: translateX(-50%);
width: 84px;
height: 84px;
background-position: center 0;
background-repeat: no-repeat;
background-size: 100% 336px;
}
.list-theme .flex > a p {
position: absolute; 
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 0 20px;
}
.list-theme .flex > a .tit {
top: 26.7rem;
font-weight: 700;
font-size: 24px;
line-height: 3.4rem;
}
.list-theme .flex > a .txt {top: 31.8rem; line-height: 2.6rem;}
.list-theme .flex > a:hover * {color: #fff;}
.list-theme .flex > a:hover > i {background-position: center -84px;}

.search-theme .flex-btn {display: flex; justify-content: center; margin: 6rem auto 0;}
.search-theme .flex-btn button {height: 6.4rem; border-radius: 0.6rem; color: #fff;}
.search-theme .flex-btn button + button {margin: 0 0 0 1rem;}
.search-theme .flex-btn .btnSearch {
width: 92.9rem;
background: #E27625;
font-weight: 700;
font-size: 20px;
line-height: 32px;
}
.search-theme .flex-btn .btnSearch span {
display: inline-block;
margin: 0 0 0 0.5rem;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.search-theme .flex-btn .btnInitial {
width: 31.9rem;
background: #EDEFF3;
border: 1px solid #C3CAD6;
color: #A2AAB8;
font-weight: 700;
font-size: 16px;
line-height: 2.4rem;
}

/* 테마상품관 :  */
.search-theme {overflow: hidden; padding-top: 50rem;}
.search-theme .flex-area {position: relative; margin: 0 auto 0; padding: 0 6rem 0;}
.search-theme .swiper {overflow: hidden;}
.search-theme .flex-area .swiper-wrapper {
    flex-direction: row;
}
.search-theme .swiper-button-next,
.search-theme .swiper-button-prev {color: #000;}
.search-theme .swiper .tab {
display: flex;
justify-content: center;
position: relative;
width: 100%;
height: 14rem;
padding-top: 9.8rem;
border-radius: 1rem;
color: #A2AAB8;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.search-theme .swiper .tab.on {background-color: #fff; color: #E6751F;}
.search-theme .swiper .tab::after {
content: '';
display: block;
clear: both;
position: absolute;
top: 1.8rem; left: 50%;
transform: translateX(-50%);
width: 6rem;
height: 6rem;
background-size: 100% 100%;
}
.search-theme .swiper .tab > i {
content: '';
display: block;
clear: both;
position: absolute;
top: 1.8rem;
left: 50%;
transform: translateX(-50%);
width: 6rem;
height: 6rem;
background-size: 100%;
}
.visual-topbox {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: absolute;
top: 0; left: -4rem;
width: 1490px;
height: 410px;
padding: 0 0 0 8rem;
}
.visual-topbox.grd-style-1 {
background: linear-gradient(to bottom right, #245A8F, #193D71);
border-radius: 10px 10px 80px 10px;
}
.visual-topbox.grd-style-2 {
background: linear-gradient(to bottom right, #22678A, #193D71);
border-radius: 10px 10px 80px 10px;
}
.visual-topbox.icon-1,
.visual-topbox.icon-3,
.visual-topbox.icon-5,
.visual-topbox.icon-7,
.visual-topbox.icon-9,
.visual-topbox.icon-11,
.visual-topbox.icon-13,
.visual-topbox.icon-15 {background: url('/magi/assets/images/fund/bg01_box_410.png') no-repeat center center;}
.visual-topbox.icon-2,
.visual-topbox.icon-4,
.visual-topbox.icon-6,
.visual-topbox.icon-8,
.visual-topbox.icon-10,
.visual-topbox.icon-12,
.visual-topbox.icon-14 {background: url('/magi/assets/images/fund/bg02_box_410.png') no-repeat center center;}
.visual-topbox::after {
content: '';
display: none;
clear: both;
position: absolute;
top: 0; right: 12rem;
width: 10rem;
height: 10rem;
background-repeat: no-repeat;
background-position: center center;
}
.visual-topbox h1 {
margin-top: 12rem;
color: #fff;
font-size: 16px;
line-height: 2.4rem;
}
.visual-topbox h2 {
margin-top: 0.9rem;
color: #fff;  
font-size: 5.4rem;
line-height: 8rem;
}
.visual-topbox p {
margin-top: 3px;
color: #fff;
font-size: 20px;
line-height: 32px;
}

/* 테마상품관 : ‘테마명’ 펀드 수익률 TOP 3 */
.content-txt {margin-top: 1rem;}
#container .top-rate-products-wrapper .comm_items-theme {padding: 5rem 0 0;}
#container .top-rate-products-wrapper .comm_items-theme .item {justify-content: space-between; width: 1410px;}
#container .top-rate-products-wrapper .comm_items-theme .item > li {width: 450px !important; max-width: calc(100% / 3);}
#container .top-rate-products-wrapper .comm_items-theme .item > li:nth-child(3) {margin-right: 0;}
#container .top-rate-products-wrapper .comm_items-theme .item > li > a {padding: 0 4rem 4rem;}
#container .top-rate-products-wrapper .comm_items-theme .item .area {padding-top: 0;}
#container .top-rate-products-wrapper .comm_items-theme .item .lb {margin-top: 3.7rem;}
#container .top-rate-products-wrapper .comm_items-theme .item .lb > span:first-child {padding-left: 0;}
#container .top-rate-products-wrapper .comm_items-theme .item .tit {margin-top: 1.6rem;}
#container .top-rate-products-wrapper .comm_items-theme .item .txt {margin-top: 0.6rem;}
#container .top-rate-products-wrapper .comm_items-theme .item .info .rate {padding: 0;}
#container .top-rate-products-wrapper .comm_items-theme .item .info .rate em {margin-top : 5.7rem;}
#container .top-rate-products-wrapper .comm_items-theme .item .info .rate span {
margin-top: 0.6rem;
font-weight: 700;
font-size: 30px;
line-height: 4.2rem;
}
#container .top-rate-products-wrapper .comm_items-theme .item .chart {position: absolute; bottom: 0; right: 4rem;}

/* 테마상품관 : swiper */
.search-theme .swiper-slide {
display: flex;
align-items: center;
font-size: 18px;
text-align: center;
}
@media (max-width: 760px) {
.search-theme .swiper-button-next {right: 20px; transform: rotate(90deg);}
.search-theme .swiper-button-prev {left: 20px; transform: rotate(90deg);}
}
#relationFundList > section > div {margin-top: 11.5rem;}

/* 성과확인 */
.result-data {
min-width: 1000px;
width: 100%;
max-width: 1410px;
min-height: 35rem;
height: 30.8511vw;
max-height: 485px;
margin: 5.5rem auto 0;
padding: 6.7rem 8rem 0;
background-color: #fff;
border-radius: 2.4rem;
}
.result-data h2 {color: #8C94A3; font-weight: 500;}
.result-data h2 span {letter-spacing: 0; vertical-align: top;}
.result-data .tit {
margin-top: 1.9rem;
color: #193D71;
font-weight: 700;
font-size: 3.4rem;
line-height: 4.2rem;
}
.result-data ul {padding-top: 3.4rem;}
.result-data ul > li {
display: flex;
align-items: center;
margin-top: 2.6rem;
line-height: 0;
}
.result-data ul > li .name {
width: 11rem;
padding-left: 1.5rem;
background: url('/magi/assets/images/common/bullt_5x5.png') no-repeat 0 center;
font-size: 18px;
line-height: 2.6rem;
}
.result-data ul > li .data {font-size: 18px; line-height: 2.6rem; letter-spacing: 0;}
.result-data ul > li .sum {
position: relative;
top: 0.3rem;
font-weight: 700;
font-size: 30px;
line-height: 4.2rem;
letter-spacing: 0;
}
.result-data ul > li .won {font-size: 20px; line-height: 28px;}
.result-data ul > li .rate {margin: 0 0 0 2rem; font-size: 20px; line-height: 28px;}
.result-data ul > li .minus {color: #245DAB;}
.result-data ul > li .plus {color: #D93B3B;}
.inv-chart {
position: relative;
min-width: 1000px;
width: 100%;
max-width: 1410px;
min-height: 35rem;
height: 41.1348vw;
max-height: 58rem;
margin: 2.9rem auto 0;
}
.inv-chart img {width: 100%;}
.inv-chart .boxArea .btn-func {
display: flex;
position: absolute;
top: 42px; right: 40px;
line-height: 0;
}
.inv-chart .boxArea .btn-func button {
width: 40px;
height: 20px;
margin-left: 4px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 3px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
line-height: 14px;
letter-spacing: 1px;
}
.rate-chart + [class*="board_data"] {margin-top: 8.5rem;}
.rate-chart {
display: flex;
min-width: 1000px;
width: 100%;
max-width: 1410px;
margin: 6.8rem auto 0;
}
.rate-chart .list {margin-right: 14rem;}

/* 투자상품 판매사 안내 */
.ui_lists {display: flex; flex-wrap: wrap; justify-content: left;}
.ui_lists > a {
display: flex;
align-items: center;
position: relative;
min-width: 15rem;
width: 18.6383vw;
max-width: 27rem;
height: 8.8rem;
margin: calc(min(1.5rem, 1.0638vw)) calc(min(1.5rem, 1.0638vw)) 0 0;
padding: 0 0 0 8rem;
background-color: #fff;
border-radius: 1rem;
font-size: 18px;
line-height: 2.6rem;
}
.ui_lists > a:nth-child(5n) {margin-right: 0;}
.ui_lists > a > i {
display: block;
clear: both;
position: absolute;
top: 50%; left: 2rem;
transform: translateY(-50%);
width: 4rem;
height: 4rem;
background-size: cover;
background-position: center;
}
.ui_lists.all > a {justify-content: center; height: 13rem; padding: 0;}
.ui_lists.all > a::after {display: none;}

/* 펀드 vs 펀드 : 상단 비주얼 영역 */
#container.autoH {padding: 0;}
/* body.isOn #infoData, */
/* body.isOn #infoData {padding-top: 1450px;} */
/* body.isOn.up #infoData {padding-top: 0;} */
.compare-vs {height: 116.1rem; padding: 21rem 0 21.7rem; background-color: #E17729;}
form[name=insertForm]{ height:1161px;}
#infoData .content-stit {margin-bottom: 29px;}
.compare-vs.topFixed {transition:initial;}
.compare-vs h1 {color: #fff !important;}
.compare-vs .flex {
display: flex;
justify-content: space-between;
min-width: 1000px;
width: 100%;
max-width: 1410px;
margin: 10.8rem auto 0;
}
.compare-vs .flex > li {
position: relative;
min-width: 24rem;
width: 25.5319vw;
max-width: 36rem;
}
.compare-vs .flex > li .btnOpen {
position: relative;
overflow: hidden;
width: 100%;
height: calc(max(16rem, 25.5319vw));
height: 24.4rem;
background: url('/magi/assets/images/fund/box_360x244.png') no-repeat center center;
font-size: 0;
text-indent: -9999em;
line-height: 0;
transition: all 0.3s ease;
}
.compare-vs .flex > li:hover .btnOpen {background: url('/magi/assets/images/fund/box_hover_360x244.png') no-repeat center center;}
.compare-vs .flex > li .btnOpen::before,
.compare-vs .flex > li .btnOpen::after {
content: '';
display: block;
clear: both;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
}
.compare-vs .flex > li .btnOpen::before {
top: 11.6rem; left: 50%;
width: 4rem;
height: 4rem;
margin-left: -2rem;
background-image: url('/magi/assets/images/fund/btn_plus_40x40.png');
transition: all 0.5s linear;
transform: rotate( 0 );
}
.compare-vs .flex > li:hover .btnOpen::before {
background-image: url('/magi/assets/images/fund/btn_plus_hover_40x40.png');
transform: rotate( 360deg );
}
.compare-vs .flex > li .btnOpen::after {
bottom: -12.9rem; left: 1.5rem;
width: 33.9rem;
height: 13.1rem;
background-image: url('/magi/assets/images/fund/bg_339x131.png');
/* transition: all 0.5s ease; */
}
.compare-vs .flex > li:hover .btnOpen::after {bottom: -8.5rem;}
.compare-vs .flex > li .txt-basis {
margin-top: 4.3rem;
color: #fff; 
font-weight: 500;
text-align: center;
}
.compare-vs .flex > li.on .txt-basis {display: none;}
.compare-vs .flex > li .btnReselect {display: none; margin: 53px auto 0; text-align: center;}
.compare-vs .flex > li .btnReselect span {
margin-left: -30px;
padding-left: 30px;
background: url('/magi/assets/images/common/ico_reselect.png') no-repeat 0 center;
color: #FFF;
font-weight: 500;
text-align: center;
}
.compare-vs .flex > li.on .btnReselect {display: block;}
.compare-vs .flex > li .pop {
display: none;
position: absolute;
top: 4.2rem; left:0;
width: 100%;
height: 20.2rem;
padding: 3rem 3rem;
background-color: #fff;
border-top-left-radius: 2.4rem;
border-top-right-radius: 2.4rem;
}
.compare-vs .flex > li.on .pop {display: block;}
.compare-vs .flex > li .pop .lb span{
  position: relative;
  padding: 0 9px 0 7px;
  color: #595E6B;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}
.compare-vs .flex > li .pop .lb span::after{
  content: '';
  display: block;
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: 1px;
  height: 12px;
  background: #D5D8E1;
}
.compare-vs .flex > li .pop .lb span:last-of-type::after{display:none;}
.compare-vs .flex > li .pop .tit {
overflow: hidden;
padding-top: 3rem;
font-weight: 500;
font-size: 20px;
line-height: 28px;
}
.compare-vs .flex > li .pop .txt {
padding-top: 0.8rem;
color: #6F7685;
font-size: 1.2rem;
line-height: 1.8rem;
}
.compare-vs .flex > li .pop .btnDel {
position: absolute;
top: 1.8rem; right: 1.8rem;
width: 3rem;
height: 3rem;
background: url('/magi/assets/images/common/btn_close_30x30.png') no-repeat center center;
font-size: 0;
text-indent: -9999em;
line-height: 0;
}
#container .compare-vs .flex .no-data .txt-none {display: none;}
.compare-vs .ui_flex-center {margin-top: 15.3rem;}

/* 펀드 vs 펀드 : 상단 비주얼 영역 고정 */
#container .compare-vs.topFixed.isOn h1,
#container .compare-vs.topFixed.isOn .btnOpen,
#container .compare-vs.topFixed.isOn .txt-basis,
#container .compare-vs.topFixed.isOn .btnDel,
#container .compare-vs.topFixed.isOn .btnReselect,
#container .compare-vs.topFixed.isOn .btnCompare {display: none;}
#container .compare-vs.topFixed.isOn {
height: 20rem;
max-height: 20rem;
margin: 0 auto;
padding: 0;
background-color: #fff;
border-bottom: 1px solid #F58220;
}
#container .compare-vs.topFixed.isOn .flex {width: 1410px; margin: 0 auto; height: 100%;}
#container .compare-vs.topFixed.isOn .flex > li {
width: calc(100% / 3);
max-width: 49.66rem;
padding: 0 2.5rem;
border-left: 1px solid #EDEFF3;
}
#container .compare-vs.topFixed.isOn .flex > li:first-child {border-left: 0;}
#container .compare-vs.topFixed.isOn .flex .pop {
display: block;
position: static;
height: auto;
padding: 0;
border-radius: 0;
}
#container .compare-vs.topFixed.isOn .flex .pop .lb {display: block; margin-top: 5.2rem;}
#container .compare-vs.topFixed.isOn .flex .pop .lb span {
position: relative;
padding: 0 1.1rem 0 1rem;
color: #595E6B;
font-size: 1.2rem;
line-height: 1.8rem;
}
#container .compare-vs.topFixed.isOn .flex .pop .lb span:first-child {padding-left: 0;}
#container .compare-vs.topFixed.isOn .flex .pop .lb span::after {
content: '';
display: block;
position: absolute;
top: 0.5rem;
left: 0;
width: 1px;
height: 10px;
background: #D5D8E1;
}
#container .compare-vs.topFixed.isOn .flex .pop .lb span:first-child::after {display: none;}
#container .compare-vs.topFixed.isOn .flex .pop .tit {margin-top: 1.3rem; padding: 0;}
#container .compare-vs.topFixed.isOn .flex .pop .txt {font-size: 14px; letter-spacing: 0;}
#container .compare-vs.topFixed.isOn .flex .no-data .pop {display: none;}
#container .compare-vs.topFixed.isOn .flex .no-data {display: flex; justify-content: center; align-items: center;}
#container .compare-vs.topFixed.isOn .flex .no-data .txt-none {display: block; color: #A2AAB8; font-weight: 500;}

/* 펀드 vs 펀드 : 공통 .round-bod */
.round-box {
min-width: 1000px;
width: 100%;
max-width: 1410px;
margin: 0 auto 0;
padding: 40px 0;
background-color: #fff;
border-radius: 2.4rem;
}
.round-box .flex {display: flex;}
.round-box .flex .item {
display: flex; 
flex-direction: column;
width: calc(100% / 3);
padding: 1.9rem 4rem 2.2rem;
border-left: 1px solid #EDEFF3;
line-height: 0;
}
.round-box .flex .item:first-child {border: 0 none;}

/* 펀드 vs 펀드 : 상품별 투자포인트! */
.round-box .point {height: 100%;}
.round-box .point > .item p {position: relative; margin-top: 30px; padding-left: 15px;}
.round-box .point > .item p:first-child {margin-top: 0;}
.round-box .point > .item p::after {
content: '';
display: block;
clear: both;
position: absolute;
top: 0.8rem; left:0;
width: 4px;
height: 4pxx;
background-color: #2B2F36;
}

/* 펀드 vs 펀드 : 기본 정보 */
.round-box .info > ul {padding-bottom: 4.2rem !important;}
.round-box .info > ul > li {
height: 9rem;
padding: 1.7rem 0 1.9rem;
border-bottom: 1px solid #EDEFF3;
line-height: 0;
}
.round-box .info > ul > li:first-child {height: 73px; padding-top: 0;}
.round-box .info > ul > li:last-child {border-bottom: 0;}
.round-box .info > ul > li em {
display: block;
color: #6A7180;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.round-box .info > ul > li span {
display: flex;
padding-top: 0.7rem;
font-size: 18px;
line-height: 26px;
letter-spacing: 0;
}
.round-box .info > ul > li span .won {display: inline-block; margin-left: 5px; color: #2B2F36; font-size: 18px; line-height: 26px; vertical-align: top;}
.round-box .info > ul > li dl {display: flex; flex-wrap: wrap; padding-top: 0.7rem;}
.round-box .info > ul > li dl dt,
.round-box .info > ul > li dl dd {font-size: 14px; line-height: 20px; letter-spacing: 0;}
.round-box .info > ul > li dl dt {word-spacing: 0.3rem;}
.round-box .info > ul > li dl dd {margin: 0 2rem 0 0.5rem; letter-spacing: 0;}

/* 펀드 vs 펀드 : 수익률 */
.flex-both {display: flex; align-items: baseline; width: 1410px; margin: 0 auto 29px;}
.flex-both .content-stit {width: auto; margin: 115px 0 0;}
.flex-both .data {margin: 0 0 0 auto; letter-spacing: 0;}
.flex-both .data span {display: inline-block; vertical-align: top;}
.round-box .rate > ul > li {
height: 9rem;
padding: 1.7rem 0 1.9rem;
border-bottom: 1px solid #EDEFF3;
line-height: 0;
}
.round-box .rate > ul > li:last-child {height: auto; padding-bottom: 0;}
.round-box .rate > ul > li.chart {height: auto; padding: 0 0 5.5rem; text-align: center;}
.round-box .rate > ul > li:last-child {border: 0;}
.round-box .rate > ul > li em {
display: block;
color: #6A7180;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.round-box .rate > ul > li span {
display: block;
padding-top: 0.7rem;
font-weight: 700;
font-size: 18px;
line-height: 2.6rem;
letter-spacing: 0;
}
.round-box .rate > ul > li span.plus {color: #D93B3B;}

/* 펀드 vs 펀드 : 판매사 */
.round-box .sales .item .li {
display: flex;
flex-wrap: wrap;
padding: 2.8rem 0 3rem;
border-top: .1rem solid #EDEFF3;
}
.round-box .sales .item .li:first-child {padding-top: 0; border: 0;}
.round-box .sales .item .li:last-child {padding-bottom: 0;}
.round-box .sales .item .li h3 {
width: 100%;
color: #8C94A3;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}
.round-box .sales .item .li a {
display: flex;
align-items: center;
position: relative;
width: calc(100% / 2);
margin-top: 1.6rem;
padding: 0 1rem 0 3.4rem;
}
.round-box .sales .item .li a img {
position: absolute;
top: 0; left: 0;
width: 24px;
height: 24px;
}
.round-box .sales .item .li a::before {
content: '';
display: block;
clear: both;
position: absolute;
top: 0; left: 0;
width: 2.4rem;
height: 2.4rem;
}

/* 펀드 vs 펀드 : 어떤 펀드를 많이 비교했을까요? */
.round-box .compare .item {position: relative;}
.round-box .compare .item .chart {
width: 50%;
position: absolute;
bottom: 2rem; right: 4rem;
padding: 0 0 0 2rem;
}
.round-box .compare .item .chart img {width: 100%;}
.round-box .compare .item .lb {display: flex; margin-top: 0.8rem;}
.round-box .compare .item .lb .btn {
width: 1.4rem;
height: 2rem;
background: url('/magi/assets/images/common/btn_interest.png') no-repeat center center;
font-size: 0;
text-indent: -9999em;
line-height: 0;
}
.round-box .compare .item .lb .btn.on {background: url('/magi/assets/images/common/btn_interest_on.png') no-repeat center center;}
.round-box .compare .item .lb span {
position: relative;
padding: 0 0.9rem 0 0.9rem;
color: #595E6B;
font-weight: 400;
font-size: 1.2rem;
line-height: 20px;
}
.round-box .compare .item .lb span::after {
content: '';
display: block;
clear: both;
position: absolute;
top: 0.7rem;
right: 0;
width: 0.1rem;
height: 0.8rem;
background: #A2AAB8;
}
.round-box .compare .item .lb span:last-child::after {display: none;}
.round-box .compare .item .tit {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 1.5rem 0 0;
color: #2B2F36;
font-weight: 500;
font-size: 2.0rem;
line-height: 28px;
}
.round-box .compare .item .txt {
margin: 0.5rem 0 0;
color: #6F7685;
font-weight: 500;
font-size: 1.2rem;
line-height: 1.8rem;
}
.round-box .compare .item .info {
display: flex;
justify-content: right;
flex-wrap: wrap;
width: 50%;
margin-top: 6.3rem;
}
.round-box .compare .item .info li em,
.round-box .compare .item .info li span {display: block; font-style: normal; font-weight: 500;}
.round-box .compare .item .info .rate {width: 100%; padding: 0 0 2.3rem;}
.round-box .compare .item .info .rate em {color: #595E6B; font-size: 1.2rem; line-height: 20px;}
.round-box .item .info .rate span {
margin-top: 0.5rem;
color: #D73E3E;
font-size: 4.2rem;
line-height: 4.8rem;
white-space: nowrap;
}
.round-box .compare .item .info .price {width: 50%;}
.round-box .compare .item .info .price em {
color: #595E6B;
font-family: 'Pretendard';
font-size: 1.2rem;
line-height: 20px;
}
.round-box .compare .item .info .price span {
font-family: 'Pretendard';
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
}

/* 펀드 계산기 */
.table-thead {
display: flex;
align-items: center;
height: 6.1rem;
border-top: 1px solid #193D71;
}
.table-thead [class*="th"] {font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 0;}
.table-thead [class*="th-1"] {margin: 0 auto;}
.table-thead [class*="th-2"] {margin-right: 9rem;}
.table-thead [class*="th-3"] {margin-right: 3.4rem;}
.table-thead [class*="th-4"] {margin-right: 5.7rem;}
.txt-dotted {
position: relative; 
padding: 8.3rem 0 4rem;
font-weight: 500; 
text-align: center;
}
.txt-dotted span {color: #D93B3B; vertical-align: top;}
.list .notice-word {font-size: 14px; line-height: 20px;}
.list .notice-word + .board_head {margin-top: 24px;}
.list .notice-word + .board_head.topFixed.isOn {margin-top: 0;}
.popup-box {
display: flex;
justify-content: space-between;
min-width: 1000px;
width: 100%;
max-width: 1410px;
margin: 0 auto;
}
.popup-box .popClick {
min-width: 20rem;
width: calc(100% / 4);
max-width: 34.2rem;
height: 6rem;
margin-right: calc(min(1.4rem, 0.9929));
background: #fff;
border-radius: 0.6rem;
border: 1px solid #D2D7E1;
color: #193D71;
font-weight: 500;
font-size: 18px;
line-height: 2.6rem;
}
#container.theme ~ footer,
#container.view ~ footer {margin-top: 0;}

.fixed {
  position: fixed;
  top: 50px; /* Adjust this value to the height of your top navigation bar */
  /*width: 100%;*/
  z-index: 1000;
  background-color: white; /* Adjust as needed */
}
.search-product .typeC label:focus-visible,
.search-product .typeC input:focus-visible,
.search-product .flex-btn .btnInitial:focus-visible{outline: 2px dashed #fff;outline-offset:1px;}

#indicator8 .board_data .board_data-round{display:flex;padding-top:40px;justify-content:space-between;align-items:center;}