@charset "UTF-8";
@font-face {
    font-family:"Pretendard";
    src:url("../fonts/Pretendard-Bold.eot");
    src:url("../fonts/Pretendard-Bold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Pretendard-Bold.woff2") format("woff2"),
        url("../fonts/Pretendard-Bold.woff") format("woff"),
        url("../fonts/Pretendard-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
}

@font-face {
    font-family:"Pretendard";
    src:url("../fonts/Pretendard-Medium.eot");
    src:url("../fonts/Pretendard-Medium.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Pretendard-Medium.woff2") format("woff2"),
        url("../fonts/Pretendard-Medium.woff") format("woff"),
        url("../fonts/Pretendard-Medium.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
}

@font-face {
    font-family:"Pretendard";
    src:url("../fonts/Pretendard-Regular.eot");
    src:url("../fonts/Pretendard-Regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Pretendard-Regular.woff2") format("woff2"),
        url("../fonts/Pretendard-Regular.woff") format("woff"),
        url("../fonts/Pretendard-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
}

/*공통 CSS*/
* {
    touch-action: pan-x pan-y; 
    max-width: 100%;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	font-family: 'Pretendard';
	font-size: 16px;
	font-weight:500;
	line-height:150%;
	color:#1a1a1a; 
	-webkit-text-size-adjust: none;
	background-color: white;
	word-break:keep-all;
}
:root {
  --Primary-Red: #D71820;
  --Secondary-Blue: #2166d6;
  --Darken-Red: #AF0009;
  --Red-80: #DE2B32;
  --Red-40: #FF989C;
  --Red-20: #FFCBCD;  
  --Red-10: #FFE7E8;
  --Red-5: #FFF3F4;
  --Darken-Blue: #19319F;
  --Blue-30: #C8DAFF;
  --Blue-15: #E6EEFF;
  --Blue-5: #F5F8FF;  
  --BGray-1: #646a78;
  --BGray-2: #AAACB4;
  --BGray-3: #D0D3D8;
  --BGray-4: #E5E7EC;  
  --BGray-6: #F8F9FB;
}
/*폰트 css*/
.h1 {
  font-size: 52px;
  font-weight: 700; /* Bold */
}
.h2 {
  font-size: 42px;
  font-weight: 700; /* Bold */
}
.h3 {
  font-size: 32px;
  font-weight: 700; /* Bold */
}
.label1 {
  font-size: 28px;
  font-weight: 700; /* Bold */
}
.label2 {
  font-size: 22px;
  font-weight: 700; /* Bold */
}
.label3 {
  font-size: 18px;
  font-weight: 700; /* Bold */
}
.p1 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}
.p2-b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.p3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.underline-p1 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
}
.underline-p3-b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
}
.underline-p3-m {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: underline;
}
.underline-c1-b {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
}
.underline-c1-m {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
}
.caption1 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.caption2 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.caption3 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.main_box {
	width: 1152px;
	min-width: 1152px; /* 줄어들지 않게 보장 */
}

ol li, ul li, li ul li {
	list-style: none;
	padding: 0;
	line-height: 1.5em;
}

input{-webkit-appearance:none; appearance:none; -webkit-border-radius:0; border-radius:0;}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
input[type="number"]{-moz-appearance:textfield;}

button, input, select, textarea, optgroup {
    font: inherit;
    margin: 0;
}
a:link, a:visited {
	color: #181818;
	text-decoration: none;
}

/*radio*/
div[class^="tab-in-wrap"] ul.tab-in-tit {
    display: flex;
    padding: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #F8F9FB;
      cursor: pointer;
}

div[class^="tab-in-wrap"] ul.tab-in-tit li{
  flex: 1 1 0;
  min-width: 0;
}


div[class^="tab-in-wrap"] ul.tab-in-tit li.active span {
    opacity: 1;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
    -webkit-box-shadow: 0 0 1px 0 rgba(27, 29, 31, 0.25), 0 10px 15px 0 rgba(27, 29, 31, 0.05), 0 0 2px 0 #D3E0ED;
    box-shadow: 0 0 1px 0 rgba(27, 29, 31, 0.25), 0 10px 15px 0 rgba(27, 29, 31, 0.05), 0 0 2px 0 #D3E0ED;
    font-weight: 700;
}

div[class^="tab-in-wrap"] ul.tab-in-tit li span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 94%;
    height: 75%;
    line-height: 150%;
    padding: 5px;
    text-align: center;
    font-size: 16px;
    opacity: 0.3;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s;
}

/* 펀드정보 - 펀드명 */
.fundInfo-fundname {
	height: 32px;
	padding: 2px;
}

.fundInfo-fundname:hover {
	text-decoration: underline;
}


/* 펀드정보 - 상단(유형,위험도,온라인) */
.fundInfo-subhead {
	font-size: 11px;
	line-height: 16px;
	margin: 6px 0;
}


.fund-name{
    color: #181818;
    text-decoration: none;	
}

/*icon product*/
.iconProduct {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 24px;
    padding: 0 8px;
    font-size: 14px;
    text-align: center;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.iconProduct.groupYN {
	color: rgb(12, 96, 193);
	background-color: rgb(205, 226, 247);
}

.iconProduct.compname, .iconProduct.online {
	color: rgba(88, 92, 100, 1);
	background-color: rgba(239, 243, 247, 1);
	/*
	    background-color: #F8F9FB;
	        color: #1a1a1a;*/
}

.iconProduct:first-child {
	margin-left: 0;
}
.iconProduct.type1 {
	background-color: #FFF3F4;
	color: #D71820;
} /* 매우 높은 위험 */
.iconProduct.type2 {
	background-color: #FFF2EB;
	color: #cd3400;
} /* 높은 위험 */
.iconProduct.type3 {
	background-color: #FFFAE0;
	color: #a46500;
} /* 다소 높은 위험 */
.iconProduct.type4 {
	background-color: #F4FBE6;
	color: #2c8400;
} /* 보통 위험 */
.iconProduct.type5 {
	background-color: #F4FBE6;
	color: #2c8400;
} /* 낮은 위험 */
.iconProduct.type6 {
	background-color: #EAF8EA;
	color: #00814d;
} /* 매우 낮은 위험 */


/*tab*/
div[class^="tab-wrap"] ul.tab-tit {
	display: flex;
	justify-content: space-between;
	height: 53px;
	font-size: 18px;
	font-family: 'Pretendard';
	font-weight: 500;
	border-bottom: 2px solid #1a1a1a;
}

div[class^="tab-wrap"] {
    margin-top: 32px;
}

div[class^="tab-wrap"] ul.tab-tit li.tab-active {
    border: 2px solid #1a1a1a;
   border-bottom: 0px;
    background-color: #fff;
}

div[class^="tab-wrap"] ul.tab-tit li {
    position: relative;
    flex: 1;
    height: 100%;
  	text-align: center;      /* 다줄일 때도 중앙 정렬 유지 */
   -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    background-color: #F8F9FB;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


/* 페이징 */
.paging-wrapper {
    width: 100%;
    text-align: center;
    margin-top:40px;
    display:flex; 
    justify-content:center; 
    align-items:center;
}
.paging-wrapper a {
	display:flex; 
	justify-content:center; 
	align-items:center; 
	width:50px; 
	height:50px; 
	margin-right:8px; 
	-webkit-border-radius:6px; 
	border-radius:6px; 
	opacity:0.3; 
	-webkit-transition:0.3s; 
	-o-transition:0.3s; 
	-ms-transition:0.3s; 
	-moz-transition:0.3s; 
	transition:0.3s;
}
.paging-wrapper a:hover {
	opacity:1; 
	text-decoration:underline;
}
.paging-wrapper a:active,
.paging-wrapper a:focus,
.paging-wrapper a.active{
	opacity:1; 
	background-color:#F1F2F6; 
	font-weight:700;
}
.paging-wrapper a.disabled,
.paging-wrapper a.disabled:hover{
	opacity:0.08; 
	cursor:default;
}
.paging-wrapper a.cm-this { 
    opacity: 1;
    background-color: #F1F2F6;
    font-weight: 700;
}
.paging-wrapper .cm-btn_first,.paging-wrapper .cm-btn_prev,
.paging-wrapper .cm-btn_next,.paging-wrapper .cm-btn_last {
  background-color: #F2F5FB;
  background-repeat: no-repeat;
  background-position: center;
}
.paging-wrapper .cm-btn_first {
  background-image: url(../images/btn_paging_first.gif);
  background-size: 40% auto;
}
.paging-wrapper .cm-btn_prev {
  background-image: url(../images/btn_paging_prev.gif);
  background-size: 20% auto;
}
.paging-wrapper .cm-btn_next {
  background-image: url(../images/btn_paging_next.gif);
  background-size: 20% auto;
}
.paging-wrapper .cm-btn_last {
  background-image: url(../images/btn_paging_last.gif);
  background-size: 40% auto;
}

/* 테이블 영역 잡는 layout*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table {
    border-collapse: collapse;
    width: 100%;
}

.tb-layout{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	align-self: stretch;
}

.table th {
    font-size: 16px;
    font-weight: normal;
    height: 60px;
    padding-left: 12px;
    padding-right: 12px;
    border-top: 1px solid #D0D3D8;
    border-bottom: 1px solid #D0D3D8;
    background-color: #F8F9FB;
}

.table td {
    line-height: 1.5;             
    padding: 16px 12px;          
    border-bottom: 1px solid #D0D3D8;
    white-space: normal;          
    overflow-wrap: anywhere;   
    word-break: keep-all;        
}


.table tr:has(th + td) th {
    border-right: 1px solid #D0D3D8;
}
.table tbody tr:first-child td {
  border-top: 1px solid #D0D3D8;
}
.table.noline tbody tr:first-child td {
    border-top: none;
}
.table-head-caption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.table-tt {
	margin-bottom: 10px;
    text-align: right;
    font-size: 16px;
    color: #666;
}


.table2 {
	text-align: left;
    width: 100%;;
}

.table2 {
	border-top: 2px solid #3f3f3f;
}

.table2 th, .table2 td {
	line-height: 150%;
	padding: 20px 12px;
	border-bottom: 1px solid #D0D3D8;
}

.table2 th {
	color: #3f3f3f;
	font-weight: 700;
}

.table3 {
    border-collapse: collapse;
    width: 100%;
}

.table3 th {
    font-size: 16px;
    font-weight: normal;
    height: 60px;
    padding-left: 12px;
    padding-right: 12px;
    border: 1px solid #D0D3D8;
    border-bottom: 1px solid #D0D3D8;
    background-color: #F8F9FB;
}

.table3 td {
    line-height: 139%;
    padding: 20px 12px;
    border: 1px solid #D0D3D8;    
    border-bottom: 1px solid #D0D3D8;
    text-align: center;
}

.table3 tr:has(th + td) th {
    border-right: 1px solid #D0D3D8;
}

.alignR {
	text-align: right !important;
}

.alignC {
	text-align: center !important;
}

.alignL {
	text-align: left !important;
}
.tb-layout .head b.fl_right { margin-left:auto; font-weight: 700; font-size: initial; font-weight:initial;  line-height: initial; letter-spacing:initial; }

.tb-layout .head {
  display: flex;            
  align-items: center;    
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.2px;
}
.tb-layout .head::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  background-color: #D71820;
}

.tb-area {
  display: flex;
  background: var(--Bk-Color1, #fff);
  padding: 32px 0px;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
}
.pop-area {
  padding: 32px 24px;
}
/* 수익률 화살표/폰트 */
.cm-arr-increase {
	display: inline-block;
	overflow: hidden;
	width: 9px;
	height: 5px;
	text-align: left;
	text-indent: -10000em;
	vertical-align: middle;
	background: url('../images/arr_increase_red.png')
		no-repeat 0 0;
}

.cm-arr-decrease {
	display: inline-block;
	overflow: hidden;
	width: 9px;
	height: 5px;
	text-align: left;
	text-indent: -10000em;
	vertical-align: middle;
	background: url('../images/arr_decrease.png')
		no-repeat 0 0;
}
.cm-txt-decrease {
	color: var(--Secondary-Blue,#2166d6) !important;
}

.cm-txt-increase {
	color:  var(--Primary-Red,#D71820) !important;
}
 
/*초기화 검색 버튼*/
.btn {
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 44px;
	line-height: 44px;
	padding: 0 24px;
	vertical-align: middle;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
}

.btn-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px !important;
}
.btn.lg {
	height: 56px;
	line-height: 56px;
	padding: 0 32px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 700;
}

.btn.sm {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}

/* 회색 테두리 버튼 (ghostGR) */
.btn[class*="ghostGR"] {
  border: 1px solid #E5E7EC;
  background-color: #fff;
  color: #222;
  font-weight: 500;
}
.btn[class*="ghostGR"]:not(:disabled):not(.disabled):not(.nobtn):hover {
  border-color: #D0D3D8;
  text-decoration: underline;
}
.btn[class*="ghostGR"]:not(:disabled):not(.disabled):not(.nobtn):focus {
  border-color: #D0D3D8;
  background: #F8F9FB;
}
.btn[class*="ghostGR"]:not(.nobtn):focus,
.btn[class*="ghostGR"]:not(.nobtn).select {
  border-color: #8f929d;
  background-color: #F8F9FB;
}
.btn[class*="ghostGR"]:not(.nobtn).select:hover {
  border-color: #8f929d;
}

/* 조회 버튼 */
.btn[class*="btn-result"] {
  background-color: #3f3f3f;
  color: #fff;
  margin-right: 12px;
}

.btn[class*="btn-result"]:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background: url("../images/ic_search-WH.svg") center/cover no-repeat;
}

.btn[class*="btn-result"]:not(:disabled):not(.disabled):not(.nobtn):hover,
.btn[class*="btn-result"]:not(:disabled):not(.disabled):not(.nobtn):focus {
  background-color: #1a1a1a;
}

/* 초기화 버튼 */
.btn[class*="btn-reset"] {
  background-color: #F1F2F6;
  color: #222;
}

.btn[class*="btn-reset"]:not(:disabled):not(.disabled):not(.nobtn):hover,
.btn[class*="btn-reset"]:not(:disabled):not(.disabled):not(.nobtn):focus {
  background-color: #E5E7EC;
}

/* 등급 이미지 */
.cm-wrap {
	display: flex;
	justify-content: center;
	vertical-align: middle;
}

.cm-star-grade {
	background: url(../images/star_icon.png) center no-repeat;
	height: 24px;
	width: 92px;
	background-size: 150px;
}

.cm-star-grade.star {
	background-position: 0 -42px;
}

.cm-star-grade.star1 {
	background-position: 0 -153px;
}

.cm-star-grade.star2 {
	background-position: 0 -130px;
}

.cm-star-grade.star3 {
	background-position: 0 -108px;
}

.cm-star-grade.star4 {
	background-position: 0 -85px;
}

.cm-star-grade.star5 {
	background-position: 0 -63px;
}