@charset "euc-kr";

/* briefing Guide */
.briefing { position:relative; padding:19px 0 0 0; }
.briefing .swiper-container { margin-top:5px }
.titBox { position:relative; display:block; text-align:center;  }
.titBox h1 { position:relative; color:#111; font-size:20px; z-index:10000; }
.titBox h1 .t1 { animation:t1 0.3s 2.2s; }
.titBox h1 .t2 { animation:t1 0.3s 2.4s; }
.titBox h1 .t3 { animation:t1 0.3s 2.6s; }
.titBox h1 .t4 { animation:t1 0.3s 2.8s; }
.titBox h1 .t5 { animation:t1 0.3s 3s; }
.titBox h1 .t6 { animation:t1 0.3s 3.4s; }
.titBox .help { margin-top:-7px; background-color:#ffffff; }
.titBox h1 .explan { display:block; padding:10px 0; font-size:14px; }

.anibot { height:42px; text-align:center; }
.anibotBg { position:relative; display:inline-block; width:42px; height:35px; vertical-align:top; background:url(/mable/images/investment/anibot.png) 50% 50% no-repeat; background-size:42px 35px; }
.anibot .eye { position:absolute; top:11px; left:50%; margin-left:-10px; }
.anibot .eye span { display:inline-block; width:2px; margin-left:4px; height:4px; background:#111; animation:eye 2s infinite; }
.anibot .mouth { position:absolute; top:16px; left:50%; margin-left:-5px; text-align:center }
.anibot .mouth span { display:inline-block; width:6px; height:2px; background:#111; animation:mouth 2s infinite alternate; }
.anibot .txt { position:absolute; top:2px; left:29px; }
.anibot .txt span:first-child { display:block; width:0; height:2px; margin-top:2px; background:#111; animation:txt1 4s infinite; }
.anibot .txt span:last-child { display:block; width:0; height:2px; margin-top:1px; background:#111; animation:txt2 4s infinite; }
@keyframes t1 {
	0% { top:-3px; opacity:0; }
	80% { top:0; opacity:1; }
	100% { top:0; opacity:1; }
}
@keyframes t2 {
	0% { top:-3px; opacity:0; }
	80% { top:0; opacity:1; }
	100% { top:0; opacity:1; }
}
@keyframes t3 {
	0% { top:-3px; opacity:0; }
	80% { top:0; opacity:1; }
	100% { top:0; opacity:1; }
}
@keyframes t4 {
	0% { top:-3px; opacity:0; }
	80% { top:0; opacity:1; }
	100% { top:0; opacity:1; }
}
@keyframes t5 {
	0% { top:-3px; opacity:0; }
	80% { top:0; opacity:1; }
	100% { top:0; opacity:1; }
}
@keyframes t5 {
	0% { opacity:0; }
	30% { opacity:1; }
	70% { opacity:0; }
	100% { opacity:1; }
}
@keyframes eye {
	0% { height:4px; }
	5% { height:1px; }
	10% { height:4px; }
	100% { height:4px; }
}
/* @keyframes mouth {
	0% { width:6px; }
	20% { width:2px; }
	70% { width:6px; }
	100% { width:4px; }
} */

@keyframes txt1 {
	0% { width:0; }
	10% { width:9px; }
	100% { width:9px; }
}
@keyframes txt2 {
	0% { width:0; }
	10% { width:0; }
	20% { width:5px; }
	100% { width:5px; }
}
@keyframes eyeTy2 {
	0% { height:4px; }
	5% { height:1px; }
	10% { height:4px; }
	100% { height:4px; }
}
@keyframes eyeTy3 {
	0% { height:6px; }
	5% { height:1px; }
	10% { height:6px; }
	100% { height:6px; }
}
.anibotTy2 { display:inline-block; height:29px; margin-right:5px; }
.anibotTy2 > .anibotBg { position:relative; display:inline-block; width:43px; height:29px; vertical-align:sub; background:url(/mable/images/investment/anibotTy2.png) 50% 50% no-repeat; background-size:43px 29px; }
.anibotTy2 .eye1 { position:absolute; bottom:10px; left:13px; width:2px; height:4px; background:#111; animation:eyeTy2 2s infinite; }
.anibotTy2 .eye2 { position:absolute; bottom:10px; left:25px; width:2.4px; height:6px; background:#111; animation:eyeTy3 2s infinite; }

.todayQ { position:relative; margin-top:10px; width:100%; }
.todayQ .cont { position:absolute; left:12%; top:0; width:76%; height:230px; padding:50px 0; text-align:center; background:#fff; box-shadow:1px 1px 7px #cccccc; z-index:1000; }
.todayQ .cont h1 { margin:0 auto;width:90px; height:90px; line-height:90px; border-radius:200px; font-size:25px; background:#efefef; }
.todayQ .cont p { padding:5% 0; font-size:28px; line-height:35px; font-weight:lighter; }
.todayQ .cont .date { display:inline-block; font-size:20px; letter-spacing:2px; }

/* ¾÷Á¾º° visual Guide */
.visual { width:auto; height:120px; padding:30px 20px; text-align:left; box-sizing:border-box; }
.visual .tit { position:relative; display:block; color:#111; font-size:24px; line-height:24px; font-family:KBFGText-Medium; }
.visual .tit .detail { display:inline-block; width:24px; height:24px; margin-left:5px; vertical-align:bottom; border-radius:100%; background:#111 url(/mable/images/investment/ico_details.png) 50% 50% no-repeat; background-size:14px 15px; }
.visual.ty1 .tit, .visual.ty3 .tit { color:#fff !important; }
.visual .con { display:inline-block; margin-top:10px; padding:3px 5px; font-size:14px; background:#fff; }
.visual .con > span { display:inline-block; margin-left:10px; }
.visual .con > span.upTxt:before, .visual .con > span.dwTxt:before { left:-8px; margin-top:-10px; }
.visual.ty1 { background:#111 url(/mable/images/investment/visualTy1_01.png) 50% 50% no-repeat; background-size:cover; } /* À½½Ä·á */
.visual.ty2 { background:#111 url(/mable/images/investment/visualTy1_02.png) 50% 50% no-repeat; background-size:cover; } /* ¼¶À¯ÀǺ¹ */
.visual.ty3 { background:#111 url(/mable/images/investment/visualTy1_03.png) 50% 50% no-repeat; background-size:cover; } /* Á¾¹Ì¸ñÁ¦ */
.visual.ty4 { background:#111 url(/mable/images/investment/visualTy1_04.png) 50% 50% no-repeat; background-size:cover; } /* È­ÇÐ */
.visual.ty5 { background:#111 url(/mable/images/investment/visualTy1_05.png) 50% 50% no-repeat; background-size:cover; } /* Á¦¾à */
.visual.ty6 { background:#111 url(/mable/images/investment/visualTy1_06.png) 50% 50% no-repeat; background-size:cover; } /* ºñ±Ý¼Ó */
.visual.ty7 { background:#111 url(/mable/images/investment/visualTy1_07.png) 50% 50% no-repeat; background-size:cover; } /* ö°­ */
.visual.ty8 { background:#111 url(/mable/images/investment/visualTy1_08.png) 50% 50% no-repeat; background-size:cover; } /* ±â°è */
.visual.ty9 { background:#111 url(/mable/images/investment/visualTy1_09.png) 50% 50% no-repeat; background-size:cover; } /* Àü±âÀüÀÚ */
.visual.ty10 { background:#111 url(/mable/images/investment/visualTy1_10.png) 50% 50% no-repeat; background-size:cover; } /* ÀÇ·áÀåºñ */
.visual.ty11 { background:#111 url(/mable/images/investment/visualTy1_11.png) 50% 50% no-repeat; background-size:cover; } /* ¿î¼öÀåºñ */
.visual.ty12 { background:#111 url(/mable/images/investment/visualTy1_12.png) 50% 50% no-repeat; background-size:cover; } /* À¯Åë */
.visual.ty13 { background:#111 url(/mable/images/investment/visualTy1_13.png) 50% 50% no-repeat; background-size:cover; } /* Àü±â°¡½º */
.visual.ty14 { background:#111 url(/mable/images/investment/visualTy1_14.png) 50% 50% no-repeat; background-size:cover; } /* ¿î¼Û */
.visual.ty15 { background:#111 url(/mable/images/investment/visualTy1_15.png) 50% 50% no-repeat; background-size:cover; } /* Åë½Å */
.visual.ty16 { background:#111 url(/mable/images/investment/visualTy1_16.png) 50% 50% no-repeat; background-size:cover; } /* ÀºÇà */
.visual.ty17 { background:#111 url(/mable/images/investment/visualTy1_17.png) 50% 50% no-repeat; background-size:cover; } /* º¸Çè */
.visual.ty18 { background:#111 url(/mable/images/investment/visualTy1_18.png) 50% 50% no-repeat; background-size:cover; } /* Áõ±Ç */
.visual.ty19 { background:#111 url(/mable/images/investment/visualTy1_19.png) 50% 50% no-repeat; background-size:cover; } /* ¼­ºñ½º */
.visual.ty20 { background:#111 url(/mable/images/investment/visualTy1_20.png) 50% 50% no-repeat; background-size:cover; } /* °Ç¼³ */

.circle { overflow:hidden; width:100px; height:100px; font-size:18px; border:1px solid #d4d4d4; border-radius:100%; background:#fff; }
.circle > .visual { display:flex; align-items:center; justify-content:center; padding:3px 10px 0; width:100%; height:70px; line-height:70px; text-align:center; vertical-align:middle; background:#fff5dd; }
.circle > .visual > span.name { overflow:hidden; margin-top:8px; font-size:15px; line-height:22px; vertical-align:middle; max-height:44px; display:-webkit-box; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:2; word-wrap:break-word; }
.swiper-slide:nth-child(even) .circle > .visual { background-color:#ffdec6; }
.circle .num { display:inline-block; padding-left:5px; font-size:14px; font-weight:normal; }
.circle + .tit { display:inline-block; margin-top:5px; font-size:14px; font-family:KBFGText-Medium; }
.circle > .visual.ty1, .recommendList li.ty1 { background:#111 url(/mable/images/investment/visualTy2_01.png) 50% 50% no-repeat; background-size:cover; } /* À½½Ä·á */
.circle > .visual.ty2, .recommendList li.ty2 { background:#111 url(/mable/images/investment/visualTy2_02.png) 50% 50% no-repeat; background-size:cover; } /* ¼¶À¯ÀǺ¹ */
.circle > .visual.ty3, .recommendList li.ty3 { background:#111 url(/mable/images/investment/visualTy2_03.png) 50% 50% no-repeat; background-size:cover; } /* Á¾¹Ì¸ñÁ¦ */
.circle > .visual.ty4, .recommendList li.ty4 { background:#111 url(/mable/images/investment/visualTy2_04.png) 50% 50% no-repeat; background-size:cover; } /* È­ÇÐ */
.circle > .visual.ty5, .recommendList li.ty5 { background:#111 url(/mable/images/investment/visualTy2_05.png) 50% 50% no-repeat; background-size:cover; } /* Á¦¾à */
.circle > .visual.ty6, .recommendList li.ty6 { background:#111 url(/mable/images/investment/visualTy2_06.png) 50% 50% no-repeat; background-size:cover; } /* ºñ±Ý¼Ó */
.circle > .visual.ty7, .recommendList li.ty7 { background:#111 url(/mable/images/investment/visualTy2_07.png) 50% 50% no-repeat; background-size:cover; } /* ö°­ */
.circle > .visual.ty8, .recommendList li.ty8 { background:#111 url(/mable/images/investment/visualTy2_08.png) 50% 50% no-repeat; background-size:cover; } /* ±â°è */
.circle > .visual.ty9, .recommendList li.ty9 { background:#111 url(/mable/images/investment/visualTy2_09.png) 50% 50% no-repeat; background-size:cover; } /* Àü±âÀüÀÚ */
.circle > .visual.ty10, .recommendList li.ty10 { background:#111 url(/mable/images/investment/visualTy2_10.png) 50% 50% no-repeat; background-size:cover; } /* ÀÇ·áÀåºñ */
.circle > .visual.ty11, .recommendList li.ty11 { background:#111 url(/mable/images/investment/visualTy2_11.png) 50% 50% no-repeat; background-size:cover; } /* ¿î¼öÀåºñ */
.circle > .visual.ty12, .recommendList li.ty12 { background:#111 url(/mable/images/investment/visualTy2_12.png) 50% 50% no-repeat; background-size:cover; } /* À¯Åë */
.circle > .visual.ty13, .recommendList li.ty13 { background:#111 url(/mable/images/investment/visualTy2_13.png) 50% 50% no-repeat; background-size:cover; } /* Àü±â°¡½º */
.circle > .visual.ty14, .recommendList li.ty14 { background:#111 url(/mable/images/investment/visualTy2_14.png) 50% 50% no-repeat; background-size:cover; } /* ¿î¼Û */
.circle > .visual.ty15, .recommendList li.ty15 { background:#111 url(/mable/images/investment/visualTy2_15.png) 50% 50% no-repeat; background-size:cover; } /* Åë½Å */
.circle > .visual.ty16, .recommendList li.ty16 { background:#111 url(/mable/images/investment/visualTy2_16.png) 50% 50% no-repeat; background-size:cover; } /* ÀºÇà */
.circle > .visual.ty17, .recommendList li.ty17 { background:#111 url(/mable/images/investment/visualTy2_16.png) 50% 50% no-repeat; background-size:cover; } /* º¸Çè */
.circle > .visual.ty18, .recommendList li.ty18 { background:#111 url(/mable/images/investment/visualTy2_17.png) 50% 50% no-repeat; background-size:cover; } /* Áõ±Ç */
.circle > .visual.ty19, .recommendList li.ty19 { background:#111 url(/mable/images/investment/visualTy2_19.png) 50% 50% no-repeat; background-size:cover; } /* ¼­ºñ½º */
.circle > .visual.ty20, .recommendList li.ty20 { background:#111 url(/mable/images/investment/visualTy2_20.png) 50% 50% no-repeat; background-size:cover; } /* °Ç¼³ */

.circle.ty2 { overflow:hidden; display:inline-block; width:50px; height:50px; margin-left:8px; font-size:11px !important; border:1px solid #d4d4d4; border-radius:100%; }
.circle.ty2:first-child { margin-left:0; }
.recommendList:after { content:''; clear:both; display:block; }
.circle.ty2 > .visual { display:flex; align-items:center; justify-content:center; margin:0 15%; padding:0; width:70%; line-height:50px; vertical-align:middle; background:none; }
.circle.ty2 > .visual > .name { overflow:hidden; line-height:15px; margin-top:-17px; vertical-align:middle; max-height:46px; text-align:center; display:-webkit-box; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:3; word-wrap:break-word; }

@media all and (min-width:375px) and (max-width:413px) {
	.circle.ty2 { width:58px; height:58px; margin-left:10px; font-size:12px !important; }
	.circle.ty2 > .visual { line-height:58px; }
	.circle.ty2 > .visual > .name { margin-top:-13px; }
}
@media all and (min-width:414px) {
	.circle.ty2 { width:66px; height:66px; margin-left:10px; font-size:12px !important; }
	.circle.ty2 > .visual { line-height:66px; }
	.circle.ty2 > .visual > .name { margin-top:0px; }
}

/* Á¾¸ñ¸í »ó¼¼ Guide */
.indexArea { position:relative; margin:0; padding:15px 0 15px 20px; border-bottom:1px solid #cacaca; background:#fff; }
.indexArea h1 { color:#111; font-size:24px; text-align:left; }
.indexArea .value { display:inline-block; margin-top:-5px; font-size:30px; }
.indexArea .net { position:relative; display:inline-block; margin-left:20px; font-size:12px; line-height:13px; }
.indexArea.up { color:#eb322d; }
.indexArea.up .net > .num1:before { content:'¡ã'; position:absolute; left:-16px; }
.indexArea.dw { color:#2460ce; }
.indexArea.dw .net > .num1:before { content:'¡å'; position:absolute; left:-16px; }
.indexArea.tn { color:#111; }
.indexArea.tn .net > .num1:before { content:'£­'; position:absolute; left:-16px; }
.indexArea button { position:absolute; top:50%; right:0; width:50px; height:60px; margin-top:-34px; padding-top:28px; font-size:11px; border:1px solid #111; background:url(/mable/images/investment/favorite_off.png) 50% 8px no-repeat; background-size:21px 20px; }
/* .indexArea button.active { background:url(/mable/images/investment/favorite_on.png) 50% 10px no-repeat; background-size:21px 20px; } */

.chart { padding:25px 10px; text-align:center; background:#fff; }
.chart.ty2 {padding:25px 0px;}
.chart:after { content:''; display:block; clear:both; }
.chart li { display:block; float:left; }
.chart li:first-child { width:56%; }
.chart li:last-child { width:44%; }
.chart h1 { position:relative; font-size:16px; }

.wifiWrap {padding:10px 0 0 0;}
.wifiWrap svg path { fill:none; stroke:#000; stroke-width:1px; }
svg.Signal3 path:nth-child(1) { animation: wifiSignal 2s; animation-iteration-count:1; animation-fill-mode:both; animation-delay:800ms; animation-direction:alternate; }
svg.Signal3 path:nth-child(2) { animation: wifiSignal 2s; animation-iteration-count:1; animation-fill-mode:both; animation-delay:400ms; animation-direction:alternate; }
svg.Signal3 path:nth-child(3) { animation: wifiSignal 2s; animation-iteration-count:1; animation-fill-mode:both; animation-direction:alternate; }
svg.Signal2 path:nth-child(2) { animation: wifiSignal 2s; animation-iteration-count:1; animation-fill-mode:both; animation-delay:400ms; animation-direction:alternate; }
svg.Signal2 path:nth-child(3) { animation: wifiSignal 2s; animation-iteration-count:1; animation-fill-mode:both; animation-direction:alternate; }
svg.Signal1 path:nth-child(3) { animation: wifiSignal 2s; animation-iteration-count:1; animation-fill-mode:both; animation-direction:alternate; }

.aniQbotWrap { padding:25px 0 0 0;position:relative; }
.aniQbotWrap .aniQbot { position:absolute; left:50%; top:0px; margin-left:-15px; width:30px; height:30px; background:url(/mable/images/investment/ani_qbot.png) center center no-repeat; background-size:100%; }
.aniQbotWrap .aniQbot span {position:absolute; bottom:40%; display:block; width:2px; height:2px; background:#000000; }
.aniQbotWrap .aniQbot span:nth-child(1) { left:30%; animation: eye 2s infinite; }
.aniQbotWrap .aniQbot span:nth-child(2) { right:30%; animation: eye 2s infinite; }
.aniQbotWrap .box { margin:0px auto;width:40%; padding:5px 0; text-align:center; font-size:14px !important; color:#ffffff; border-radius:5px; background:#000000; }

.polygonWrap { margin:10px auto 20px auto; width:100px; height:100px; background:url(/mable/images/investment/bg_polygon.png) left top no-repeat; background-size:100%; }
.polygonWrap .polyObj { position:relative; width:100px; height:100px; }
.polygonWrap .polyObj div { display:block; position:absolute; left:0px; top:0px; width:100%; height:100%; animation: anipolygon 2s; animation-iteration-count:1; animation-fill-mode:both; animation-direction:alternate; }
.polygonWrap .polyObj div.on:nth-child(1) { background:url(/mable/images/investment/img_poly_01.png) left top no-repeat; background-size:100%; }
.polygonWrap .polyObj div.on:nth-child(2) { background:url(/mable/images/investment/img_poly_02.png) left top no-repeat; background-size:100%; }
.polygonWrap .polyObj div.on:nth-child(3) { background:url(/mable/images/investment/img_poly_03.png) left top no-repeat; background-size:100%; }
.polygonWrap .polyObj div.on:nth-child(4) { background:url(/mable/images/investment/img_poly_04.png) left top no-repeat; background-size:100%; }
.polygonWrap .polyObj div.on:nth-child(5) { background:url(/mable/images/investment/img_poly_05.png) left top no-repeat; background-size:100%; }

.polygonWrap .polyObj p { position:absolute; font-size:13px; }
.polygonWrap .polyObj p span { display:inline-block; padding:0 5px; color:#5177BC; }
.polygonWrap .polyObj div:nth-child(1) p { left:-35%; top:5px; text-align:right; letter-spacing:-1px; }
.polygonWrap .polyObj div:nth-child(1) p span { position:absolute; right:-15px; top:0; color:#5177BC; }
.polygonWrap .polyObj div:nth-child(2) p { right:-35%; top:5px; text-align:left; letter-spacing:-1px; }
.polygonWrap .polyObj div:nth-child(2) p span { position:absolute; left:-15px; top:0; color:#5177BC; }
.polygonWrap .polyObj div:nth-child(3) p { left:-30%; top:65px; }
.polygonWrap .polyObj div:nth-child(4) p { right:-30%; top:65px; }
.polygonWrap .polyObj div:nth-child(5) p { left:10%; top:100px; }

.helpWrap { text-align:left; font-weight:normal; font-size:14px; z-index:10000; }
.help { display:inline-block; width:20px; height:20px; margin-top:-5px; vertical-align:middle; border:1px solid #9b9b9b; border-radius:100%; background:url(/mable/images/investment/ico_help.png) 50% 48% no-repeat; background-size:6px 9px; z-index:10000;}
.helpLayer { display:none; position:absolute; padding:15px 22px; border:1px solid #dfdfdf; background:#ffffff; z-index:10000; }
.helpLayer p + p { margin-top:10px; }
.helpLayer .close { position:absolute; right:5px; top:3px; width:20px; height:20px; }
.helpLayer .close span { position:absolute; right:0; top:10px; display:block; width:90%; height:1px; background:#000000; }
.helpLayer .close span:nth-child(1) { transform:rotate(-45deg); }
.helpLayer .close span:nth-child(2) { transform:rotate(45deg); }


@keyframes wifiSignal {
	from { fill:none; }
	to { fill:#fdd3b5; }
}
/* @keyframes qbotEyes {
	0% { height: 2px; }
	20% { height: 3px; }
	40% { height: 5px; }
	60% { height: 5px; }
	80% { height: 3px; }
	100% { height: 2px; }
} */
@keyframes anipolygon {
	from { opacity:0; }
	to { opacity:1; }
}

.graph { margin:0; padding:0; height:210px; text-align:center; border-top:6px solid #f0f0f0; background:#fff; }

/* ¾÷Á¾Àü·«, Á¾¸ñÀü·« Guide */
.acc { overflow:hidden; margin-top:12px; background:#fff; }
.acc.first { margin-top:0; }
.acc > .tit { position:relative; padding:15px 10px; font-size:16px; font-family:KBFGText-Medium; }
.acc > .tit em { display:inline-block; margin-right:5px; color:#5177BC; font-style:italic; }
.acc > .tit.ty2 { padding:0 !important; }
.acc > .tit:after { content:''; position:absolute; top:50%; right:8px; width:24px; height:24px; margin-top:-12px; background:url(/mable/images/common/arrowDown.png) 50% 50% no-repeat; background-size:12px 6px; }
.acc > .tit.active:after { background:url(/mable/images/common/arrowUp.png) 50% 50% no-repeat; background-size:12px 6px; }
.acc > .tit .stit { display:inline-block; width:50%; padding:15px 10px; border-left:1px solid #efefef; box-sizing:border-box; }
.acc > .tit .stit:first-child { border-left:none; }
.acc > .tit .date { position:absolute; top:21px; right:10px; color:#999; font-size:12px; font-weight:normal; }
.acc .txt { padding:0 10px; color:#111; font-size:15px; }
.accCon { overflow:hidden; display:block; padding:10px; border-top:1px solid #efefef; }
.accCon.pb0 { padding-bottom:0; }
.accCon > .txt { padding:0; }
.accCon > .txt.icoTy { position:relative; padding-left:50px; letter-spacing:-1px; }
.accCon > .txt.icoTy .ico { width:40px;position:absolute; left:0; top:50%; margin-top:-15px; }
.accCon > .txt.icoTy .ico img { display:block; width:100%; }
.accCon button { padding:14px; width:50%; font-size:16px; border:1px solid #111; box-sizing:border-box; background:#fff; }
.accCon button:last-child { margin-left:-5px; }
.accCon.ty2 { padding:0 10px 10px; border-top:none; }
.slideArea { margin:0 -10px; background:#fafafa; }
.slideArea .swiper-container { margin-bottom:0; padding-bottom:13px; }
.slideArea > .checkNotice { padding:14px 14px 0; border-top:1px solid #efefef; background:#fff; }
.slideArea > .checkNotice li { position:relative; padding-left:22px; color:#888; font-size:14px; }
.slideArea > .checkNotice li:before { content:'!'; position:absolute; top:0; left:0; width:14px; height:14px; font-size:10px; text-align:center; border:1px solid #888; border-radius:100%; background:#fff; }
.viewBtn { display:block; margin-top:15px; text-align:center; }
.viewBtn > button { display:inline-block; padding:0; font-size:12px; border:none; background:none; }

.box > .sunny { position:relative; display:block; width:100%; height:100px; background:url('/mable/images/investment/bg_sunny.png') no-repeat; background-size:cover; }
.box > .sunny:after { content:''; position:absolute; top:14px; left:50%; width:70px; height:70px; margin-left:-35px; background:url('/mable/images/investment/ico_sunny.png') no-repeat; background-size:cover; }
.box > .cloudy { position:relative; display:block; width:100%; height:100px; background:url('/mable/images/investment/bg_cloudy.png') no-repeat; background-size:cover; }
.box > .cloudy:after { content:''; position:absolute; top:14px; left:50%; width:70px; height:70px; margin-left:-35px; background:url('/mable/images/investment/ico_cloudy.png') no-repeat; background-size:cover; }

.searchBox { position:relative; margin:5% auto; padding:8px 7px; width:90%; height:16px; border:2px solid #000; color:#111; }
.searchBox:after { content:''; display:block; position:absolute; right:3px; top:50%; width:26px; height:26px; margin-top:-13px; background:url(/mable/images/common/ico_search.png) center center no-repeat; background-size:50%; }
.timingBox { position:relative; width:100%; height:110px; line-height:110px; }
.timingBox.sunny { background:url(/mable/images/investment/bg_sunny_02.png) top center no-repeat; background-size:100% 100%; }
.timingBox.sunny .txt { color:#111; }
.timingBox.cloudy { background:url(/mable/images/investment/bg_cloudy_02.png) top center no-repeat; background-size:100% 100%; }
.timingBox.cloudy .txt { color:#fff; }
.timingBox.sunny .point { color:#eb322d; }
.timingBox.cloudy .point { color:#5792ff; }
.timingBox:after { content:''; display:block; position:absolute; left:10px; top:50%; margin-top:-30px; width:60px; height:60px; }
.timingBox.sunny:after { background:url(/mable/images/investment/ico_sunny.png) center center no-repeat; background-size:cover; }
.timingBox.cloudy:after { background:url(/mable/images/investment/ico_cloudy.png) center center no-repeat; background-size:cover; }
.timingBox .txt { display:inline-block; padding-left:80px; line-height:18px; vertical-align:middle; }
.chartWrap { margin:12px -10px 0; border-top:1px solid #cacaca; }

.recommendBox { position:relative; padding:0 10px 10px; }
.recommendBox h1 { position:absolute; top:0; left:50%; width:74px; margin-left:-37px; padding:6px 0; color:#fff; font-size:15px; text-align:center; background:#e0195f; box-sizing:border-box; }
.recommendList { display:block; padding:46px 0 36px; text-align:center; border:1px solid #cacaca; }
.recommendList li { position:relative; display:inline-block; width:46px; height:46px; margin-left:10px; font-size:13px; border:1px solid #cecece; border-radius:100%; }
.recommendList li:first-child { margin-left:0; }
.recommendList li span.tit { overflow:hidden; display:block; position:absolute; top:54px; width:100%; text-align:center; white-space:nowrap; text-overflow:ellopsis; }
.recommendList.ty2 { display:block; padding:46px 0 12px; text-align:center; border:1px solid #cacaca; }
.recommendList.ty2 li {  position:relative; display:inline-block; border:1px solid #cecece; border-radius:100%; background:#fff5dd; }
.recommendList.ty2 li:nth-child(even) { background:#ffdec6; }
@media all and (min-width:375px) and (max-width:413px) {
	.recommendList li { position:relative; display:inline-block; width:56px; height:56px; margin-left:11px; font-size:13px; border:1px solid #cecece; border-radius:100%; }
	.recommendList li span.tit { overflow:hidden; display:block; position:absolute; top:64px; width:100%; text-align:center; white-space:nowrap; text-overflow:ellopsis; }
}
@media all and (min-width:414px) {
	.recommendList li { position:relative; display:inline-block; width:61px; height:61px; margin-left:14px; font-size:14px; border:1px solid #cecece; border-radius:100%; }
	.recommendList li span.tit { overflow:hidden; display:block; position:absolute; top:68px; width:100%; text-align:center; white-space:nowrap; text-overflow:ellopsis; }
}


/* ÅõÀÚÁ¤º¸¾Ë¸®¹Ì */
.ico_hand { position:relative; overflow:visible; }
.ico_hand .ico { position:absolute; right:15%; top:40%; width:36px; height:36px; background:url('/mable/images/investment/ico_hand.png') left top no-repeat; background-size:36px; }

/* È÷¾î·Î */
.intro { position:absolute; top:0; left:0; width:100%; height:100%; padding:40px 0 0 24px; text-align:left; background:#ffd76b url('/mable/images/introBg.png')  100% 80% no-repeat; background-size:48% auto; box-sizing:border-box; -webkit-box-sizing:border-box; }
.intro.ty2 { position:absolute; top:0; left:0; width:100%; height:100%; padding:40px 0 0 24px; text-align:left; background:#aca4cf url('https://etcimg.kbsec.com/html/design/20170615112126/introBg.png')  100% 80% no-repeat; background-size:60% auto; box-sizing:border-box; -webkit-box-sizing:border-box; }
.intro.ty3 { position:absolute; top:0; left:0; width:100%; height:100%; padding:40px 0 0 24px; text-align:left; background:#9cb8cd url('https://etcimg.kbsec.com/html/design/20170622143241/introBg.png') 100% 70% no-repeat; background-size:60% auto; box-sizing:border-box; -webkit-box-sizing:border-box; }
.intro img.txt { width:233px; height:auto; }
.intro span { display:inline-block; margin-top:40px; }
.intro span img.next { width:30%; height:auto; }


.boxList { overflow:hidden; text-align:center; font-size:0; }
.boxList li { display:inline-block; overflow:hidden; width:32%; height:152px; margin-left:6px; border:1px solid #d4d4d4; text-align:center;box-sizing:border-box;  }
.boxList li .box { display:block; height:150px; background:#f0f0f0; box-sizing:border-box; }
.boxList li:first-child { margin-left:0; }
.box > .mark { display:inline-block; width:43px; height:48px; padding-top:8px; font-size:13px; line-height:15px; background:url('/mable/images/common/boxmark.png') no-repeat; background-size:cover; }
.box > .txtTy1 { display:inline-block; overflow:hidden; width:100%; line-height:70px; padding:10px; color:#111; font-size:14px; vertical-align:middle; box-sizing:border-box; }
.box > .txtTy1 > span { display:inline-block; overflow:hidden; line-height:18px; vertical-align:middle; word-wrap:break-word; }
.boxList.ty2.col2 li { width:49% !important; height:212px; }
.boxList.ty2 li .box > .txtTy1 { line-height:89px; }
.boxList.ty2 li .box { background:#fff; }
.boxList.ty3 li { display:inline-block; overflow:hidden; width:48%; height:188px; margin-left:6px; border:1px solid #d4d4d4; text-align:center;box-sizing:border-box;  }
.boxList.ty3 li .box { display:block; height:188px; background:#f0f0f0; box-sizing:border-box; }
.boxList.ty3 li .box > .txtTy1 { line-height:110px; }

/* PRIME CLUB */
.primeClub { padding-bottom:40px; }
.primeClub img { width:100%; vertical-align:top; }
.primeClub .screen1, screen3 { position:relative; }
.primeClub .screen1 .tit { position:absolute; top:0; }
.primeClub .screen2 { padding-bottom:40px; background:#ececec; }
 
.primeClub .screen2 .titTy1 { padding:40px 0 0px; color:#222; font-size:25px; text-align:center; font-family:KBFGText-Medium; }
.primeClub .screen2 .titTy1 span.small { display:block; margin-bottom:5px; font-size:21px; font-family:KBFGText-light; }
.primeClub .screen2 .titTy1 span.bgPoint { display:inline-block; padding:0 5px; background:#ffdc00; }
.primeClub .screen2 .txt { padding:0 24px; }
.primeClub .screen2 .txtTy1 { text-align:left; font-size:17px; font-family:KBFGText-light; }
.primeClub .screen2 .txtTy2 { text-align:left; font-size:21px; font-family:KBFGText-Medium; }
.primeClub .screen2 .txtTy3 { text-align:left; margin-top:30px; font-size:17px; font-family:KBFGText-light; }

.primeClub .screen3 { padding-bottom:60px; border-top:1px #ddd solid; }
.primeClub .screen3 .swiper2 { overflow:hidden; width:100%; height:auto; margin:0 auto; padding-bottom:25px !important; }
/*.swiper-container img { width:100% !important; height:100% !important;}*/
.primeClub .screen3 .swiper2 .swiper-slide div { position:relative; width:100%; }
.primeClub .screen3 .swiper2 .swiper-pagination { position:absolute; bottom:-5px !important; height:20px; z-index:9999; }
.primeClub .screen3 .swiper2 .swiper-pagination span { border:none; background:#cacaca; }
.primeClub .screen3 .swiper2 .swiper-pagination-bullet { margin:2px !important; }
.primeClub .screen3 .swiper2 .swiper-pagination-bullet-active { border:none !important; background:#111 !important; }
.primeClub .screen3 .swiper2 .swiper-button-next { width:13px; height:21px; top:60%; right:15px; background:url('/mable/images/lms/swiper-button-next.png') no-repeat; background-size:100% 100%; }
.primeClub .screen3 .swiper2 .swiper-button-prev { width:13px; height:21px; top:60%; left:15px; background:url('/mable/images/lms/swiper-button-prev.png') no-repeat; background-size:100% 100%; }

.primeClub .screen3 h1 { display:block !important; margin-top:25px; font-size:25px; text-align:center; font-family:KBFGText-Medium; }
.primeClub .screen3 h1 span.bgPoint { display:inline-block; padding:0 5px; background:#ffdc00; }
.primeClub .screen3 .txt { display:block; margin:20px 0 10px; font-size:17px; font-family:KBFGText-light; text-align:center; }
.primeClub .screen3 .txt.ty2 { margin:20px 0 35px; }

.primeClub .screen3 .tab { display:none; }
.primeClub .screen3 .tab.active { display:block; }

.primeClub .screen3 .tabTy1 { margin-bottom:0; }
.primeClub .screen3 .tabTy1 li { width:24%; }
.primeClub .screen3 .tabTy1 li:first-child { width:32%; }

.primeClub .screen4 { background:#f2f9ff; }
.primeClub .screen4 .titTy1 { padding:40px 0 0px; color:#222; font-size:25px; text-align:center; font-family:KBFGText-Medium; }
.primeClub .screen4 .titTy1 span.bgPoint { display:inline-block; padding:0 5px; background:#ffdc00; }
.primeClub .screen4 .vis { padding:10px 0 40px; }

.primeClub .btnAreaTy3 { padding:20px; }
.primeClub .positionB { z-index:9999; }

/* PRIME PB¼Ò°³ */
.primePb { overflow:hidden; }
.primePb .pb { padding:20px 0; font-size:0; border-bottom:2px #eee solid; }
.primePb .pb:first-child { padding:0 0 20px; }
.primePb .pb:last-child { border-bottom:0; }
.primePb .vis { display:inline-block; width:35%; padding-right:5%; font-size:14px; font-family:KBFGText-Medium; vertical-align:top; }
.primePb .vis .img { display:inline-block; overflow:hidden; border-radius:100%; background:#eef4ff; }
.primePb .vis .img img { width:100%; }
.primePb .tit { display:block; color:#5177bc; font-size:12px; }
.primePb .vis .tit { display:block; margin-top:5px; }
.primePb .vis .name { display:block; color:#222; font-size:14px; text-align:center; }
.primePb .txt { display:inline-block; width:60%; font-size:12px; vertical-align:middle; }
.primePb .txt .tit { display:block; margin-top:18px; font-size:12px; font-family:KBFGText-Medium; }
.primePb .txt .tit:first-child { margin-top:0; }

/* PRIME PB¼Ò°³ (°íµµÈ­) */
.primePbVis { background:url(/mable/images/investment/prime_pb_my_bg.png) left top no-repeat; background-size:100% 100%; }

/* ½Ç½Ã°£ ¼ö±Þ - ¼ö±Þµ¥ÀÌÅÍ Â÷Æ® */
.supplychart { padding:20px 0; }
.supplychart li { position:relative; margin:10px 0; }
.supplychart li .tit { display:block; position:relative; margin:0 auto; border:1px solid #E6E6E6; border-radius:100px; width:100px; height:40px; line-height:40px; text-align:center; font-weight:bold; font-size:13px; box-shadow:0px 0px 5px #ededed inset; background:#fff; z-index:100; }
.supplychart li .cont { display:block; position:absolute; top:0px; height:40px; line-height:40px; z-index:10; }
.supplychart li .cont.upTxt { left:50%; margin-left:30px; padding:0 15px 0 25px; border-radius:0 100px 100px 0; text-align:right; background:#FFF7F8; }
.supplychart li .cont.dwTxt { right:50%; margin-right:30px; padding:0 25px 0 15px; border-radius:100px 0 0 100px; text-align:left; background:#F2F9FF; }

.prime .primeBgTy1 { margin-bottom:36px; background:url(/mini/images/mypage/primeImg_bg.png) 0 146px no-repeat; background-size:100%; }
.prime .primeBgTy2 { padding:32px 0; text-align:center; background:#336FD6; }
.prime .primeBgTy2 dt { color:#fff; font-size:12px; font-weight:400; padding-bottom:10px; }
.prime .primeBgTy2 dd { color:#fff; font-size:14px; font-weight:400; }
.prime .primeBgTy2 dd span { color:#F2F219; font-weight:700; }
.prime .primeBgTy2 .subNum { display:inline-block; margin-top:16px; padding:10px 30px; color:#fff; font-size:14px; text-align:center; border-radius:20px; background:#28262D; }
.prime .primeBgTy2 .date { display:block; margin-top:10px; font-size:12px; color:#fff; text-align:center; }
.prime .txtArea { padding:65px 80px 234px; }
.prime .btnArea { overflow:hidden; margin:24px 16px; text-align:center; }
.prime .mTit { display:block; color:#F2F219; text-align:center; font-size:24px; font-weight:700; }
.prime .sTit { display:block; margin-top:15px; color:#fff; text-align:center; line-height:20px; text-align:center; font-size:14px; font-weight:400; }
.prime .sTit .point { display:block; margin-top:10px; color:#F2F219; }
.prime .list { font-size:12px; text-align:center; padding-top:10px; letter-spacing:-0.5px; }

.prime .swiperArea { position:relative; margin-top:40px; box-sizing:border-box; }
.prime .swiperArea .swiper-slide { width:222px; text-align:center; border-radius:15px; background:none; box-sizing:border-box; }

.prime .player { background:#fff; }
#videoContainer { width:100%; height:190px; background:url(/mini/images/mypage/primeThum.png) center center no-repeat; background-size: auto 190px; }
#videoContainer iframe { display:none; }