<!--
/**********************************************************************/
// 프로그램명 : 공통 jsp include jsp
// 설          명 : 
// 최초작성자 : 
// 최초작성일 : 
//
// 수정 이력 :
//
//   수정일           수정자                     수정내용
// ==========     ===============     ===============================
// 2019.08.28		이요한				최초생성
// 2019.12.05		윤영실				터치 
// 2019.12.10		윤영실				터치 
// 2019.12.13    이노식스 윤영실                  터치
// 2019.12.31    이노식스 윤영실                  터치
// 2020.01.02    이노식스 윤영실                  터치
// 2020.01.23    이노식스 윤영실                  터치
// 2020.02.06    이노식스 윤영실                  터치
// 2020.02.13    이노식스 윤영실                  터치
// 2020.02.19    이노식스 윤영실                  터치
// 2020.02.21    이노식스 윤영실                  터치
// 2020.03.03    이노식스 이종열                  터치
// 2020.03.11    이노식스 윤영실                  터치
// 2020.03.17    이노식스 정상헌                  [PMS-12582] [웹뷰] 확대기능 추가요청
// 2020.03.18    이노식스 김현옥                   터치
// 2020.03.18    이노식스 김현옥                   터치2
// 2020.03.20    이노식스 김현옥                   터치
// 2020.04.23    이노식스 윤영실                   터치
// 2020.05.07    이노식스 윤영실                   터치
// 2020.05.15    이노식스 윤영실                 터치
// 2020.05.27    이노식스 정상헌       [PMS-12775] MO웹(회사홈페이지) 구글애널리틱스 태그 코드 추가삽입 요청
// 2020.06.04    이노식스 윤영실                  터치
// 2020.06.22    이노식스 윤영실                  터치
// 2020.06.23    이노식스 윤영실                  터치
// 2020.06.25    이노식스 정상헌                  터치
// 2020.07.30    이노식스 윤영실                  터치
// 2020.08.14    이노식스 윤영실                  터치
// 2020.09.10    이노식스 정상헌       [PMS-12991] FOSS앱 웹뷰영역 구글애널리틱스 태그 코드 삽입 요청
// 2020.10.30    이노식스 윤영실                  터치
// 2020.11.06    이노식스 윤영실                  터치
// 2020.11.19    이노식스 윤영실                  터치
// 2020.12.17    이노식스 윤영실                  터치
// 2020.12.28    이노식스 윤영실                  터치
// 2021.01.07    이노식스 윤영실                  터치
// 2021.01.21    이노식스 윤영실                  터치
// 2021.01.22    이노식스 윤영실                  터치
// 2021.04.20    이노식스 정상헌                  터치
// 2021.04.30    이노식스 윤영실                  터치
// 2021.05.07    이노식스 윤영실                  터치
// 2021.06.03    이노식스 윤영실                  터치
// 2021.06.30    이노식스 윤영실                  터치
// 2021.08.31    이노식스 윤영실                  터치
// 2021.09.08    이노식스 윤영실                  터치
// 2021.09.24    이노식스 윤영실                  터치
// 2021.10.27    이노식스 윤영실                  터치
// 2021.11.25    이노식스 윤영실                  터치
// 2021.11.29    이노식스 윤영실                  터치
// 2022.01.06    이노식스 윤영실                  터치
// 2022.03.03    이노식스 윤영실                  터치
// 2022.03.18    이노식스 윤영실                  터치
// 2022.08.02    이노식스 김지호                  매체별 Meta Tag Thumb Nail 적용 시행(메타태그 수정)
// 2022.08.03    이노식스 김지호                  매체별 Meta Tag Thumb Nail 적용 시행(SEO 최적화)
// 2022.12.12    이노식스 김지호                  터치
/***********************************************************************/
-->


<!--
/**********************************************************************/
// 프로그램명 : 공통 taglib
// 설         명 :
// 최초작성자 :
// 최초작성일 :
// 수정 이력 :
// 수정일		수정자				수정내용
// ==========	===============    ===============================
// 2019.09.03	이노식스 정상헌    신규
/***********************************************************************/
-->


<!DOCTYPE html>
<html>

<script src="/common/js/pdfjs-dist/build/pdf.js?cashBuster=?cashBuster=20240423_1"></script>
<script src="/common/js/pdfjs-dist/build/pdf.worker.js?cashBuster=?cashBuster=20240423_1"></script>
<script src="/common/js/pdfLoader.js?cashBuster=?cashBuster=20240423_1"></script>

	<head>
		<!-- default_layoutC -->
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=yes"/>
		<meta name="format-detection" content="telephone=no"/>
		
		
		<!-- // ===== SNS 공유 Thumb Nail 시행 -->
		
			
				<!-- 기본 메타태그 -->
				<meta name="image" content="https://static.fosskorea.com/img_mts/com/FS_Share-400.png?cashBuster=?cashBuster=20240423_1" />
				<meta name="title" content="세상의 모든펀드, 펀드뱅크 FOSS - 한국포스증권" />
				<meta name="description" content="이제 펀드도 직접 선택해 현명하게 투자하세요." />
				<meta name="url" content="FOSSKOREA.COM" />
			
				<!-- Facebook Meta Tags / 페이스북 오픈 그래프 -->
				<meta property="og:type" content="website" />
				<meta property="og:image" content="https://static.fosskorea.com/img_mts/com/FS_Share-400.png?cashBuster=?cashBuster=20240423_1" />
				<meta property="og:title" content="세상의 모든펀드, 펀드뱅크 FOSS - 한국포스증권" />
				<meta property="og:description" content="이제 펀드도 직접 선택해 현명하게 투자하세요." />
				<meta property="og:url" content="FOSSKOREA.COM" />

				<!-- Twitter Meta Tags / 트위터 카드 -->
				<meta name="twitter:card" content="summary" />
				<meta name="twitter:image" content="https://static.fosskorea.com/img_mts/com/FS_Share-400.png?cashBuster=?cashBuster=20240423_1" />
				<meta name="twitter:title" content="세상의 모든펀드, 펀드뱅크 FOSS - 한국포스증권" />
				<meta name="twitter:description" content="이제 펀드도 직접 선택해 현명하게 투자하세요." />
				<meta name="twitter:url" content="FOSSKOREA.COM" />
			
		
		<!-- SNS 공유 Thumb Nail 시행 ===== // -->
		
		<title>세상의 모든펀드, 펀드뱅크 FOSS - 한국포스증권</title>
		
		
		<link href="https://static.fosskorea.com/images_mts/favicon/foss_logo.ico?cashBuster=20240423_1" rel="shortcut icon" type="image/x-icon" />
		
<!--
/**********************************************************************/
// 프로그램명 : 공통 css inclucde jsp
// 설		명 :  
// 최초작성자 : 
// 최초작성일 : 
//
// 수정 이력 :
//
// 		수정일		수정자						수정내용
// ==========	 ================		===============================
//  2019.09.03    이노식스 정상헌                  신규
//  2019.12.05    이노식스 윤영실                  터치
//  2019.12.10    이노식스 윤영실                  터치
//  2019.12.13    이노식스 윤영실                  터치
//  2020.01.02    이노식스 윤영실                  터치
//  2020.01.20    이노식스 정상헌                  터치
//  2020.01.23    이노식스 최일규                  터치
//  2020.02.13    이노식스 윤영실                  터치
//  2020.02.19    이노식스 윤영실                  터치
//  2020.03.11    이노식스 윤영실                  터치
//  2020.03.13    이노식스 장동규                  터치
//  2020.03.18    이노식스 김현옥                  터치
//  2020.03.18    이노식스 김현옥                  터치2
//  2020.03.20    이노식스 김현옥                  터치
//  2020.04.23    이노식스 윤영실                  터치
//  2020.05.07    이노식스 윤영실                  터치
//  2020.05.15    이노식스 윤영실                  터치
//  2020.06.04    이노식스 윤영실                  터치
//  2020.06.22    이노식스 윤영실                  터치
//  2020.06.23    이노식스 윤영실                  터치
//  2020.07.21    이노식스 정상헌                  터치
//  2020.07.30    이노식스 윤영실                  터치
//  2020.08.14    이노식스 윤영실                  터치
//  2020.09.09    이노식스 정상헌                  터치
//  2020.10.30    이노식스 윤영실                  터치
//  2020.11.06    이노식스 윤영실                  터치
//  2020.11.19    이노식스 윤영실                  터치
//  2020.12.17    이노식스 윤영실                  터치
//  2020.12.28    이노식스 윤영실                  터치
//  2021.01.07    이노식스 윤영실                  터치
//  2021.04.30    이노식스 윤영실                  터치
//  2021.04.30    이노식스 윤영실                  터치
//  2021.05.07    이노식스 윤영실                  터치
//  2021.06.03    이노식스 윤영실                  터치
//  2021.06.30    이노식스 윤영실                  터치
//  2021.08.31    이노식스 윤영실                  터치
//  2021.09.24    이노식스 윤영실                  터치
//  2021.10.27    이노식스 윤영실                  터치
//  2021.11.25    이노식스 윤영실                  터치
//  2021.11.29    이노식스 윤영실                  터치
//  2022.01.06    이노식스 윤영실                  터치
//  2022.03.18    이노식스 윤영실                  터치
//  2022.03.31    이노식스 윤영실                  터치
//  2022.04.20    이노식스 윤영실                  터치
//  2022.09.07    이노식스 윤영실                  터치               
/***********************************************************************/
-->
<!-- 공통 css -->
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/css/base.css?cashBuster=20240423_1"/>
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/css/common.css?cashBuster=20240423_1"/>
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/css/font.css?cashBuster=20240423_1"/>
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/css/layer.css?cashBuster=20240423_1"/>
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/css/swiper.css?cashBuster=20240423_1">
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/css/product.css?cashBuster=20240423_1">
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/css/myasset.css?cashBuster=20240423_1" />

<!-- 공통 메시지 팝업 css -->
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/js/modal_master/css/jquery.modal.css?cashBuster=20240423_1"/>
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/js/modal_master/css/jquery.modal.theme-xenon.css?cashBuster=20240423_1"/>
<link rel="stylesheet" type="text/css" href="https://static.fosskorea.com/common_mts/js/modal_master/css/jquery.modal.theme-atlant.css?cashBuster=20240423_1"/>

<!-- mTransKey -->
<link rel="stylesheet" type="text/css" href="/common/js/mTranskey/transkey_mobile/transkey_mobile.css?cashBuster=20240423_1"/>


<!--
/**********************************************************************/
// 프로그램명 : 공통 js inclucde jsp
// 설		명 :  
// 최초작성자 : 
// 최초작성일 : 
//
// 수정 이력 :
//
// 		수정일		수정자						수정내용
// ==========		=========		===============================
//  2019.09.03    이노식스 정상헌       신규 
//  2019.11.16    이노식스 정재근       터치
//  2020.03.02    이노식스 이종열       Google Analytics 추가
//  2020.05.28    이노식스 정상헌       [PMS-12775] MO웹(회사홈페이지) 구글애널리틱스 태그 코드 추가삽입 요청
//  2020.05.28    이노식스 정상헌       [PMS-12991] [마케팅팀] FOSS앱 웹뷰영역 구글애널리틱스 태그 코드 삽입 요청
/***********************************************************************/
-->
<script type="text/javascript">
	var fo = {};
	fo.BTN_TYPE = { 
			OK:0,
			OKCANCEL:1,
			YES:2,
			YESNO:3,
			CLOSE:4,
			CLOSEDOWNLOAD:5,
			CLOSEACCOUNT:6,
			CLOSEMOVE:7,
			CUSTOM:8
	};
	
	var CONTEXT_ROOT = '';
	var TARGET_DEVICE = '';				// 앱에서 호출시 IOS, Android
	var FILE_WEB_PATH = 'https://m.fosskorea.com:50200';				// fileManager 등 경로
	var WEB_ROOT_PATH = 'https://m.fosskorea.com:50200';				// WebRootPath
	var REDIRECT_PATH = 'https://www.fosskorea.com';				// PC redirectPath
	var ASSUMED_USER_ID = '';			// 가상 발급 ID
	var BRIDGE_TYPE = '';					// 현재   MAIN : V, POPUP : P	
	var MEMBER_LOGIN_ID = '';				// 멤버 id
	var token = '';				// 암호화 멤버 id
</script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/jquery-3.4.1.min.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/jquery.blockUI.min.js?cashBuster=20240423_1" ></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/ui.js?cashBuster=20240423_1" ></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/jquery.form.min.js?cashBuster=20240423_1" ></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/jquery-ui.min.js?cashBuster=20240423_1" ></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/jquery.ui.touch-punch.min.js?cashBuster=20240423_1" ></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/jquery-ui-draggable.min.js?cashBuster=20240423_1" ></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/jquery.cookie.min.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/jquery-radiocharm.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/modal_master/js/jquery.modal.min.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/common.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/foss-cookies.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/swiper.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/foss-ajax.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/foss-util.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/fok-comunity.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/fok-common.js?cashBuster=20240423_1"></script>


<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/highcharts/highcharts.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/highcharts/modules/exporting.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/highcharts/highcharts-more.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/highcharts/modules/no-data-to-display.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/chartSupport.js?cashBuster=20240423_1"></script>

<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/jquery.viewStack.js?cashBuster=20240423_1"></script>


<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/mTranskey/transkey_mobile/transkey_mobile.js?cashBuster=20240423_1"></script>
<script type="text/javascript" src="/transkeyServlet?op=getToken&1716176846666"></script>
<script type="text/javascript">
	var transkey_surl ="/transkeyServlet";
</script>


<script type="text/javascript" src="https://static.fosskorea.com/common_mts/js/hybrid.js?cashBuster=20240423_1"></script>


	</head>
	
	<!-- Google Analytics start --> 
	
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-81133312-11"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	
	  gtag('config', 'UA-81133312-11');
	</script>
	
	
	<!-- Google Analytics end -->
	
	<body>
		<div class="wrap">
			

<!--
/**********************************************************************/
// 프로그램명 : 공통 taglib
// 설         명 :
// 최초작성자 :
// 최초작성일 :
// 수정 이력 :
// 수정일		수정자				수정내용
// ==========	===============    ===============================
// 2019.09.03	이노식스 정상헌    신규
/***********************************************************************/
-->


<link rel="stylesheet" type="text/css" href="/common/css/customer.css?cashBuster=20240423_1"/>
<link rel="stylesheet" type="text/css" href="/common/css/product.css?cashBuster=20240423_1"/>
<!--
/**********************************************************************/
// 프로그램명 : 투자비용비교
// 설      명 : 
// 최초작성자 : 
// 최초작성일 : 
//
// 수정 이력 :
//
// 수정일       수정자         		수정내용
// ==========   ================    ===============================
// 2019-09-04   이노식스 이요한     앱개선프로젝트
// 2020-06-`0   이노식스 이종열     셀러에서 넘어올때 직접선택 기본
// 2020-10-13   이노식스 윤영실     준법감시인 심의필 변경
/***********************************************************************/
-->
<!-- 2023.11.28 UI 수정 -->
<style>
	.wrap .header.fix .title {margin-left: 0px;position: absolute;top: 19px}
	.select_type1 .design .placeholder {font-weight: 700;color: #333;}
	.invest_cost_law {padding: 20px 0 50px 0};
</style>

<script type="text/javascript">
	var isMobile = /iphone|ipad|ipod|android/i.test(navigator.userAgent.toLowerCase());
	var TARGET_DEVICE = '';
	var linkType = "web";
	var param = "";

	$(document).ready(function() {
		
		//if( !isEmpty( TARGET_DEVICE )) {
		//	isMobile = true;
		//}
		//console.log("isMobile = " + isMobile);
		//console.log("TARGET_DEVICE = " + TARGET_DEVICE);
		//console.log("TARGET_DEVICE lenght= " + TARGET_DEVICE.length);

		// if (TARGET_DEVICE == undefined || TARGET_DEVICE == "")
		// {
		// 	console.log("TARGET_DEVICE 2 =1" );
		// }

		// if (TARGET_DEVICE.toLocaleLowerCase() == "android" || TARGET_DEVICE.toLocaleLowerCase() == "ios")
		// {
		// 	console.log("TARGET_DEVICE 2 =2" );
		// }


		$("#temParam").val(param);
		//셀러에서 넘어올때 직접입력 기본선택
		if (param == 'seller'){
			
			$("#fund_div").hide();
            $("#class_div").hide();
            $("#fund_search_btn").show();
            
            $("#bankName").html("직접선택");
		} 
		
		$("#headerTitle").html("투자비용비교");
		if (TARGET_DEVICE.toLocaleLowerCase() != "web")
			$("#ico_back").show();
		else
			$("#ico_back").hide();
		
		
		//은행리스트 선택 이벤트
		$("#bankList li").click(function(){
			
			$("#bankList li").each(function(){
				 $(this).removeClass("on");
			 });			
			
			$(this).addClass("on");
			
			popClose('#investBank');
			
			
			//직접선택이 아닐때
			if($(this).data("code_value") != "000" ){
				$("#bankName").html($(this).data("code_name")+"<span class='fw_normal'> 에서 많이 팔린 펀드</span>");
				$("#sale_co_code").val($(this).data("code_value"));
				$("#fund_div").show();
				$("#class_div").show();
				$("#fund_search_btn").hide();
				
				
				selectFundList();
			}else{
				
				$("#fund_div").hide();
				$("#class_div").hide();
				$("#fund_search_btn").show();
				
				$("#bankName").html($(this).data("code_name"));
				
			}
		});
		
		
		$('input[name="month2"]').change(function() {
			
			$("#monthInput").val($("input[name='month2']:checked").val());
			
		});
		
		$("#monthInput").on('focusout', function(){
			
			var year = removeCommas($(this).val());
			
			$("input[name='month2']").each(function(){
				
				$(this).prop("checked", false);
				
				if(year == $(this).val()){
					$(this).prop("checked", true);
				}
			
			});
			
		});
		
		$("#monthInput").on("keyup", function() {
		    $(this).val(addCommas($(this).val().replace(/[^0-9]/g,"")));
		});
		
		
		$('input[name="money1"]').change(function() {
			
			$("#moneyInput").val(addCommas($("input[name='money1']:checked").val()));
			
		});
		
		$("#moneyInput").on('focusout', function(){
			
			var amt = removeCommas($(this).val());
			
			$("input[name='money1']").each(function(){
				
				$(this).prop("checked", false);
				
				if(amt == $(this).val()){
					$(this).prop("checked", true);
				}
			
			});
			
		});
		
		$("#moneyInput").on("keyup", function() {
		    $(this).val(addCommas($(this).val().replace(/[^0-9]/g,"")));
		});


		//초기조회
		selectFundList();
		
		$('.content.cntIdx2').scroll(function(){
			if($(this).scrollTop() <= 50){
				$('.menu_wrapper').removeClass('fix');
			}
		});
		
		
	});
	
	
	function moveFundDetail(fp_code){
		
		if (TARGET_DEVICE == "web" || TARGET_DEVICE == "") // pc 브라우저 or 모바일 브라우저
			return;
		if(isMobile){ // android or ios 어플
			callNative("showPopup", "/fs201200/main.do?fp_code="+fp_code, "", "");
		} else{
			window.open("/fs201200/main.do?fp_code="+fp_code);
		}
		
		
	}
	
	//back버튼
	function onBackPressed(){
		closePage();
	}

	//닫기함수
	function closePage(){
		if($("#investBank").is(':visible') == true ){
            popClose('#investBank');
		} else {
			
		    if(linkType == "web"){
				window.history.back();
	            // location.href = getLinkedUrl('/fs420000/main.do');
	        }else if($("#temParam").val() == "seller" ) {
	            location.href = getLinkedUrl('/fs520000/sellerChange01.do');
	        }else{
				if (TARGET_DEVICE == "web")
				{
					window.close();
				}
	            else
				{
					if(isMobile) {
						callNative('close', '', '', '');
					} else {
						window.close();
					}
				}
	        }
		}
	}
	
	//펀드목록
	function selectFundList(){
		
		$("#fundList").html("");
		$("#classList").html("");
		$("#class_info_text").hide();
		$("#className").html("<span class='placeholder'></span>");
		
		fokAjaxcall('fundList', 'frm', getLinkedUrl('/fs420200/selectFundList.do'));
		
	}
	
	//클래스목록
	function selectFundClass(){
		
		if($("input[name='chc-01']:checked").val() != undefined){
			
			$("#kofia_fund_code").val($("input[name='chc-01']:checked").val());
			fokAjaxcall('classList', 'frm', getLinkedUrl('/fs420200/selectFundClassList.do'));	
			
			
		}
		
	}
	
	function fokAjaxcallback(pId, result){
		
		
		if(pId == "fundList"){
			
			var html = "";
			var fundList = result.fundList;
			
			for(var i=0; i<fundList.length; i++){
				
				html += "<li>";
				html += "	<label class='inp_radio'>";
				if(i == 0){
					html += "		<span class='inp'><input type='radio' name='chc-01' checked='' data-class_name='"+fundList[i].CODE_NAME+"' value='"+fundList[i].KOFIA_FUND_CODE+"'><span class='ic'></span></span>";
				}else{
					html += "		<span class='inp'><input type='radio' name='chc-01' data-class_name='"+fundList[i].CODE_NAME+"' value='"+fundList[i].KOFIA_FUND_CODE+"'><span class='ic'></span></span>";
				}
				html += "		<a onclick='javascript:moveFundDetail(\""+fundList[i].SCLASS_FP_CODE+"\");' class='txt'>"+fundList[i].FP_KRN_NAME+"</a>";
				html += "	</label>";
				html += "</li>";
				
				
				$("#fund_std_date").html("(펀드선정 "+fundList[i].STD_DATE+")");
				
			}
			
			$("#fundList").html(html);
			
			//펀드선택 이벤트
            $("input[name=chc-01]").change(function() {
            	selectFundClass();
            });
			
            selectFundClass();
			
		}else if(pId == "classList"){
			
			var html = "";
			var classList = result.fundClassList;
			var cnt = 0;
			var sCnt = 0;
			var class_lsit = "";
			
			for(var i=0; i<classList.length; i++){
				
				if(classList[i].CODE_NAME != "S" && classList[i].CODE_NAME != "S-P"
					&& classList[i].CODE_NAME != "I" && classList[i].CODE_NAME != "F"
						&& classList[i].CODE_NAME != "P"){
					
					if(cnt == 0){
						html +="<li class='on' data-code_name='"+classList[i].CODE_NAME+"' data-code_value='"+classList[i].KOFIA_FUND_CODE+"'>";
						html +="	<a href='javascript:void(0);'>"+classList[i].CODE_NAME+" 클래스</a>";
						html +="</li>";
						$("#className").html("<span class='placeholder'>"+classList[i].CODE_NAME+" 클래스</span>");
					}else{
						html +="<li data-code_name='"+classList[i].CODE_NAME+"' data-code_value='"+classList[i].KOFIA_FUND_CODE+"'>";
						html +="	<a href='javascript:void(0);'>"+classList[i].CODE_NAME+" 클래스</a>";
						html +="</li>";
					}
					cnt++;

					if(classList[i].CODE_NAME == "A-e" || classList[i].CODE_NAME == "C-e") {

						if (sCnt == 0) {
							class_lsit += classList[i].CODE_NAME;
						} else {
							class_lsit += " , " + classList[i].CODE_NAME;
						}
						sCnt++;
					}
				}
			}

			if(sCnt > 0){
				class_lsit += " , S"
			}else{
				class_lsit += "S"
			}


			$("#class_info_text").show();
			$("#class_info_text").html("선택한 펀드에서 가장 많이 팔린 펀드는 "+$("input[name='chc-01']:checked").data("class_name")+"클래스입니다. 이 펀드는 온라인에서 "+class_lsit+"클래스로 판매됩니다.");

			$("#classList").html(html);
			
			$("#classList li").click(function(){
				
				$("#classList li").each(function(){
					 $(this).removeClass("on");
				 });			
				
				$(this).addClass("on");
				
				popClose('#investClass');
				
				$("#className").html("<span class='placeholder'>"+$(this).data("code_name")+" 클래스</span>");
				$("#kofia_fund_code").val($(this).data("code_value"));
				
			});
			
		}
		
	}
	
	function goResult(){
		
		var p_kofia_fund_code = "";
		
		if(Number($("#monthInput").val()) <= 0 ){
			alertBox('alert', '알림', "기간을 최소 1년 이상 입력하세요.");
			return;
		}
		
		if(Number($("#monthInput").val()) > 50 ){
			alertBox('alert', '알림', "기간을 최대 50년 이하 입력하세요.");
			return;
		}
		
		
		if($("#monthInput").val() == ""){
			//alert("기간을 입력하세요.");
			alertBox('alert', '알림', "기간을 입력하세요.");
			return;
		}
		
		if(Number($("#moneyInput").val().replace(/[^0-9]/g,"")) < 10000 ){
			alertBox('alert', '알림', "금액을 최소 10,000원 이상 입력하세요.");
			return;
		}
		
		if(Number($("#moneyInput").val().replace(/[^0-9]/g,"")) > 10000000000 ){
			alertBox('alert', '알림', "금액을 최대 10,000,000,000원 이하 입력하세요.");
			return;
		}
		
		if($("#moneyInput").val() == ""){
			//alert("금액을 입력하세요.");
			alertBox('alert', '알림', "금액을 입력하세요.");
			return;
		}
		
		
		if($("#bankName").html() == "직접선택"){
			p_kofia_fund_code = $("input[name='chc-01']:checked").val()
		}else{
			
			$("#classList li").each(function(){
				
				if($(this).hasClass("on")){
					p_kofia_fund_code = $(this).data("code_value"); 
				}
				
			});
			
		}
		
		
		if(p_kofia_fund_code == "" ){
			//alert("펀드를 선택하세요.");
			alertBox('alert', '알림', "펀드를 선택하세요.");
			return;
		}
		
		//console.log("isMobile = " + isMobile);
		//console.log("TARGET_DEVICE = " + TARGET_DEVICE);

		if (TARGET_DEVICE == "web" || TARGET_DEVICE == "")
		{
			window.location.href = getLinkedUrl("/fs420200/compareResult.do?kofia_fund_code="+p_kofia_fund_code+"&invest_amt="+$("#moneyInput").val().replace(/[^0-9]/g,"")+"&invest_term="+$("#monthInput").val());
		}
		else
		{
			if(isMobile)
			{
				callNative("showPopup", "/fs420200/compareResult.do?kofia_fund_code="+p_kofia_fund_code+"&invest_amt="+$("#moneyInput").val().replace(/[^0-9]/g,"")+"&invest_term="+$("#monthInput").val(), "", "");
			}
			else
			{
				//console.log("isMobile = 222");
				window.open(getLinkedUrl("/fs420200/compareResult.do?kofia_fund_code="+p_kofia_fund_code+"&invest_amt="+$("#moneyInput").val().replace(/[^0-9]/g,"")+"&invest_term="+$("#monthInput").val()));
				//window.location.href = getLinkedUrl("/fs420200/compareResult.do?kofia_fund_code="+p_kofia_fund_code+"&invest_amt="+$("#moneyInput").val().replace(/[^0-9]/g,"")+"&invest_term="+$("#monthInput").val());
			}
		}
		
	}
	
	//3자리 단위마다 콤마 생성
	function addCommas(x) {
	    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}
	 
	//모든 콤마 제거
	function removeCommas(x) {
	    if(!x || x.length == 0) return "";
	    else return x.split(",").join("");
	}
	
	
	function fundSearch(){
		
		$('.menu_wrapper').removeClass('fix');
		//$("#fundListZero").show();
    	$("#fundSearchList").html("");
    	$("#fundListDiv").hide();
		$("#gnbQueryText").val("");		
		
		popOpen('#fndListPop');
		/* fokAjaxcall('searchResult', null, getLinkedUrl('/fs420200/fundSearch.do'), {
            dataType: 'html',
            callback: function(pid, result){
            	
                $("#pop_warning").empty();
                $("#pop_warning").html(result);

                $.targetMove(1);
            }
        }); */
		
	}
	
	function closeFundSearch(){
		
		popClose('#fndListPop');
		
	}
	
	
	function choiceFund(fp_krn_name,kofia_fund_code){
		
		var html = "";
		
		html += "<li>";
		html += "	<label class='inp_radio'>";
		html += "		<span class='inp'><input type='radio' checked name='chc-01' data-class_name='' value='"+kofia_fund_code+"'><span class='ic'></span></span>";
		html += "		<a href='javascript:void(0);' class='txt'>"+fp_krn_name+"</a>";
		html += "	</label>";
		html += "</li>";
		
		$("#fundList").html(html);
		$("#fund_div").show();
		$("#fund_std_date").html("");
		
		selectFundClass();
		
		closeFundSearch();
	}
	
</script>

<div class="header">
	<div class="left"><a href="javascript:closePage();" class="back" id="ico_back"><i class="ico ico_back" ></i></a></div>
	<div class="tit_wrapper pd_wrapper">
		<h1 class="title" id="headerTitle"></h1>
	</div>
</div>

<!-- container -->
<div class="container">		
	
	
	<!-- content -->
	<div class="content">
	<form id="frm" name="frm" method="post">
		<input type="hidden" id="sale_co_code" name="sale_co_code" value="808">
		<input type="hidden" id="kofia_fund_code" name="kofia_fund_code" value="808">
		<input type="hidden" id="temParam">
		<!-- 해당클래스 -->
		<div class="customer_guide_area invest_cost_area">		
			<div class="pd_wrapper">
				<div class="paragraph type1">
						<div class="tit_type2"><b>똑똑한 투자의 시작, ‘S클래스’ 펀드</b></div>
						<div class="text c_gray2">S클래스는 ‘온라인 펀드슈퍼마켓 전용 클래스’로 선취수수료가 없고 다른 클래스 대비 낮은 판매보수를 책정하여 절약한 투자비용만큼 적립금으로 돌아옵니다.
							<br>※ 당사 연금클래스(S-P)와 퇴직연금클래스(S-P2)는 판매수수료가 없습니다. (판매보수, 증권거래비용 등 기타비용 별도 발생)
							<br>※ 일반클래스(S)는 3년 미만 환매 시 0.15%이하의 후취판매수수료가 부과될 수 있습니다.
						</div><br>
				</div>
			</div>
			
			<div class="pd_wrapper">	
				<!-- counsel_apply_form -->
				<div class="invest_cost_form">
					<div class="input_list">
					
						<div class="input_box" id="fund01">
							<p class="tit_type3"><span>펀드선택</span></p>
							<div class="select_type1">
								<a href="javascript:void(0);" onclick="popOpen('#investBank');" class="design" id="bankName">KB국민은행 <span class="fw_normal">에서 많이 판매된 펀드</span></a>
								<!-- 값 입력시 placeholder 제거 하고 a태그에 입력 -->
							</div>
						</div>
						
						<div class="btn_type2_box" id="fund_search_btn" style="display: none;">
							<a href="javascript:fundSearch();" class="btn_type2 btn1 disabled">펀드검색</a>
						</div>
						
						
						<div class="invest_fund_list" id="fund_div">
							<ul id="fundList">
																																		
							</ul>
							
							<div class="invest_fund_info">
								<p id="fund_std_date">-</p>
								<div class="text_etc" style="display: none;" id="class_info_text"></div>
								<div class="text_etc">판매사 선정기준: 기준일 공모펀드 판매잔고 상위 은행/증권 각 4개사 (기준일: 2022.12.29, 출처: 금융투자협회)</div>
								<div class="text_etc">펀드 선정기준: 펀드슈퍼마켓에서 판매 중인 펀드 중, 해당 판매사의 전월 판매량이 많은 상위 4개 펀드 (출처: 제로인)</div>
							</div>
						</div>

						<div class="input_box" id="class_div">
							<p class="tit_type3"><span>클래스</span></p>
							<div class="select_type1">
								<a href="javascript:void(0);" onclick="popOpen('#investClass');" class="design" id="className"><span class="placeholder"></span></a>
								<!-- 값 입력시 placeholder 제거 하고 a태그에 입력 -->
							</div>
						</div>														

						<div class="input_box">
							<p class="tit_type3"><span>예상투자기간</span></p>
							<div class="inp_radio2_box radio4">
								<label class="inp_radio2">
									<span class="inp"><input type="radio" name="month2" value="1"><span class="txt">1년</span></span>
								</label>
								<label class="inp_radio2">
									<span class="inp"><input type="radio" name="month2" value="2"><span class="txt">2년</span></span>
								</label>
								<label class="inp_radio2">
									<span class="inp"><input type="radio" name="month2" value="3"><span class="txt">3년</span></span>
								</label>
								<label class="inp_radio2">
									<span class="inp"><input type="radio" name="month2" value="5"><span class="txt">5년</span></span>
								</label>
							</div>
						</div>
						
						<div class="input_box">
							<p class="tit_type3"><span>직접입력</span></p>
							<div class="inp_type1">
								<label for="accountInput" class="txt_hidden">직접입력</label>
								<div class="cellbox">
									<div class="cell auto">
										<input id="monthInput" type="text" placeholder="숫자입력">
									</div>
									<div class="cell won">년</div>
								</div>
							</div>
						</div>

						<div class="input_box">
							<p class="tit_type3"><span>예상투자금액</span></p>
							<div class="inp_radio2_box radio4">
								<label class="inp_radio2">
									<span class="inp"><input type="radio" name="money1"  value="10000000"><span class="txt">1천만원</span></span>
								</label>
								<label class="inp_radio2">
									<span class="inp"><input type="radio" name="money1" value="20000000"><span class="txt">2천만원</span></span>
								</label>
								<label class="inp_radio2">
									<span class="inp"><input type="radio" name="money1" value="30000000"><span class="txt">3천만원</span></span>
								</label>
								<label class="inp_radio2">
									<span class="inp"><input type="radio" name="money1" value="50000000"><span class="txt">5천만원</span></span>
								</label>
							</div>
						</div>
						
						<div class="input_box">
							<p class="tit_type3"><span>직접입력</span></p>
							<div class="inp_type1">
								<label for="accountInput" class="txt_hidden">직접입력</label>
								<div class="cellbox">
									<div class="cell auto">
										<input id="moneyInput" type="text" placeholder="숫자입력">
									</div>
									<div class="cell won">원</div>
								</div>
							</div>
						</div>
					</div>
					<!-- // input_list -->
					
					<div class="invest_cost_law">
						<p class="fs12 c_gray3">한국포스증권 준법감시인 심사필 제 2023-141호</p>
						<p class="fs12 c_gray2">(2023.06.21 ~ 2024.06.20)</p>
					</div>
				</div>
				
			</div>

		</div>
		<!-- //  -->
	</form>
	</div>
	
	<!-- // content -->
</div>	
<!-- // container -->	

<!-- footer -->
<div class="footer">
	<!-- btn_area -->
	<div class="btn_area">
		<div class="btn_type1_box">
			<a href="javascript:goResult();" class="btn_type1 btn2">결과보기</a>
		</div>
	</div>
	<!-- // btn_area -->
</div>	
<!-- // footer -->


<!-- layerPopup -->
<div class="layerPopup2" id="investBank" style="display:none;">
	<a href="#none" class="close" onclick="popClose('#consulSelc')">
		<div class="dim"></div>
	</a>
	<div class="popup_wrap dragable_layer">
		<a href="#none" class="close close_layer" onclick="popClose('#investBank')"><i class="ico ico_x1"></i></a>
		<span class="line"></span>		
		<div class="pop_header">
			<div class="pop_title"><b>펀드선택</b></div>
			<div class="header_line"></div>
		</div>
		<div class="pop_body dragble_layer_content">
			<div class="pop_padding">
				<ul class="list_details" id="bankList">
					<li class="on" data-code_value="808" data-code_name="KB국민은행"><a href="javascript:void(0);">KB국민은행</a></li>
					<li data-code_value="815" data-code_name="신한은행"><a href="javascript:void(0);">신한은행</a></li>
					<li data-code_value="816" data-code_name="우리은행"><a href="javascript:void(0);">우리은행</a></li>
					<li data-code_value="824" data-code_name="하나은행"><a href="javascript:void(0);">하나은행</a></li>
					<li data-code_value="707" data-code_name="미래에셋증권"><a href="javascript:void(0);">미래에셋증권</a></li>
					<li data-code_value="741" data-code_name="한국투자증권"><a href="javascript:void(0);">한국투자증권</a></li>
					<li data-code_value="717" data-code_name="NH투자증권"><a href="javascript:void(0);">NH투자증권</a></li>
					<li data-code_value="742" data-code_name="하나증권"><a href="javascript:void(0);">하나증권</a></li>
					<li data-code_value="000" data-code_name="직접선택"><a href="javascript:void(0);">직접선택</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- // layerPopup -->


<!-- layerPopup -->
<div class="layerPopup2" id="investClass" style="display:none;">
	<a href="#none" class="close" onclick="popClose('#counselDate')">
		<div class="dim"></div>
	</a>
	<div class="popup_wrap dragable_layer">

		<a href="#none" class="close close_layer" onclick="popClose('#investClass')"><i class="ico ico_x1"></i></a>
		<span class="line"></span>
		
		<div class="pop_header">
			<div class="pop_title"><b>클래스</b></div>
			<div class="header_line"></div>
		</div>
		<div class="pop_body dragble_layer_content">
			<div class="pop_padding">
				<ul class="list_details" id="classList">
					
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- // layerPopup -->

<script type="text/javascript">
	$(function(){
		//검색어 입력 삭제
		initSchWord("#searchInput", "#deleteBtn");

		// 검색영역 이전검색태그 삭제
		prevSch();
		
		$("#gnbQueryText").unbind('keypress');
	    $("#gnbQueryText").bind('keypress', function(e){
	        // 엔터일 경우 처리
	        if(e.which == 13){
	            // gnb.ark.goSearchPage('#gnbQueryText');
	        } 
	    });

	    // 통합검색 키보드 입력시 자동완성 호출
	    $('#gnbQueryText').unbind('keyup');
	    $('#gnbQueryText').bind('keyup', function(e) {
	    	//트림으로 스페이스 제거
	    	
	    	if(e.which === 13){
	    		
	    		$(':focus').blur();
	    		clearTimeout($.data(this, 'timer'));

		        if($.trim($(this).val()) != '') {
		            var wait = setTimeout('giftFund()', 500);
		            $(this).data('timer', wait);
		        }
	    		
	    	}
	    });
		
	});
	
	function giftFund() {
    	var vparam = {};
    	vparam.fundName = $('#gnbQueryText').val();
        //return false;
        $('#pageNo').val("1");
        fokAjaxcall(1, vparam, getLinkedUrl('/fs420200/searchFundList.do'), {
            dataType : 'json',
            callback : function(pid, result){
            	
            	
                var total = result.json.total;
                var resList = result.json.resList;
                
                //console.log(resList);
                
                var fundList = '';
                if(total > 0) {
                    for(var i = 0; i < resList.length; i++) {
                        
                        
                    	fundList += "<tr class='detail text' onclick='javascript:choiceFund(\""+resList[i].FP_KRN_NAME+"\",\""+resList[i].KOFIA_FUND_CODE+"\")'>";
	                    fundList += "	<td>";
	                    fundList += "		<span class='tit risk0"+resList[i].INVST_RISK_GRADE_TP+"'>"+resList[i].LRG_TYPE_TP_NAME+""+resList[i].LRG_TYPE_NAME+"</span>";
	                    fundList += "		<ul>";
	                    fundList += "			<li class='c_gray2'>"+resList[i].FP_KRN_NAME+"</li>";
	                    if(resList[i].CLS_DETAIL_NAME != ""){
	                    	fundList += "			<li class='c_gray3'>"+resList[i].CLS_DETAIL_NAME+"</li>";	
	                    }
	                    fundList += "		</ul>";
	                    fundList += "	</td>";
	                    fundList += "</tr>";
                    	
                    	
                    }
                    
                    $("#fundListZero").hide();
                    $("#fundSearchList").html(fundList);
                    $("#fundListDiv").show();
                    $("#totCntSpan").html(total);
                }else{
                	$("#fundListZero").show();
                	$("#fundSearchList").html("");
                	$("#fundListDiv").hide();
                	
                }
            }
        });
    }
	
</script>

<div class="layerPopup1 full_pop" id="fndListPop" style="display:none">
	<div class="dim"></div>
	<div class="popup">
		<!-- wrap --> 
		<div class="wrap">  
			<div class="header">
				<div class="left"><a href="javascript:closeFundSearch();"  class="close"><i class="ico ico_x2"></i></a></div>
				<div class="tit_wrapper pd_wrapper">
					<h1 class="title">펀드직접선택</h1>
				</div>
			</div> 
			<!-- container -->
			<div class="container">
				<!-- content -->
				<div class="content">
					<!-- 해당클래스 -->
					<div class="customer_guide_area fund_selc_area">
				
						<div class="fund_selc_wrap">
							<div class="menu_wrapper">
								<div class="inp_search2">
									<div class="prev_search" style="display: none;">
										<div class="schtag" id="searchTag">
											<a href="javascript:void(0);" class="txt" id="tagFndName"></a>
											<a href="javascript:void(0);" class="del"><i class="ico ico_del"></i></a>
										</div>
									</div>
									<label for="gnbQueryText" class="txt_hidden">펀드명 입력</label>
									<div class="cellbox">
										<div class="cell auto">
											<input id="gnbQueryText" name="gnbQueryText" type="text" placeholder="펀드명 입력">
										</div>
										<div class="cell btn delete" id="deleteBtn" style="display:none"><a href="javascript:void(0);"><i class="ico ico_del"></i></a></div>
										<div class="cell btn search"><a href="javascript:giftFund();"><i class="ico ico_search"></i></a></div>
									</div>
								</div>
							</div>
							<div class="no_data_box" id="fundListZero" style="display : none;">
								<div class="no_data">
									<i class="ico"></i>
									<p class="txt">
										검색결과가 없습니다.
									</p>
								</div>
							</div>
							<div class="tbl_list_wrap" style="display: none" id="fundListDiv">
								<div class="pd_wrapper">
									<div class="data_top_info">
										<div class="total"><span>총</span> <span class="c_blue1 bold fs12" id="totCntSpan">0</span><span>개</span></div>
									</div>
								</div>
								<div class="tbl tbl_list t_risk">
									<table>
										<caption></caption>
										<colgroup>
											<col width="100%">
										</colgroup>
										<thead>
											<tr>
												<th class="name">펀드명</th>
											</tr>
										</thead>
										<tbody id="fundSearchList">
									
										</tbody>
									</table>
								</div>
							</div>
							
							<div class="spinner_wrap" style="display: none">
								<div class="spinner01"></div>
							</div>
						</div>
						
					</div>
					
					<!-- //  -->
				</div>
				<!-- // content -->
			</div>	
			<!-- // container -->	

		</div>
		<!-- // wrap -->		
	</div>
</div>


		</div>
		<div id="pdfLayer" class="layerBox"></div>
	</body>
</html>