@charset "UTF-8";
/*! 
 **	KIWOOMYESBANK Index-Page CSS
 *	Author   :	U:COMPANION Front-end UX.Div
 *	Create   :	2020-08-04 | 2dea; ego@2dea.com
 *	Update   :	2020-08-04 | 2dea
 *	Comments :	-
 */


/**	Import Rules
 --------------- */

@import url('./plugins/swiper.css');

/* @import url('./popup.css'); */
@import url('./layout.css');
@import url('./module.css');
@import url('./function.css');
@import url('./theme.css');
@import url('./content.css');


/**	Main-Contents Stylesheets
 ---------------------------- */

.Index-Page .tabs  { clear: both; position: relative; }
.Index-Page .tabs >*  { display: table; text-align: center; }
.Index-Page .tabs >* >*  { display: table-cell; }
.Index-Page .tabs >* >* >.label  { display: block; position: relative; }
.Index-Page .tabs >* >* >.label >.inner  { position: relative; }
.Index-Page .tabs >* >* >.label[aria-current="page"],
.Index-Page .tabs >* >* >.label[aria-current="true"],
.Index-Page .tabs >* >* >.label[aria-selected="true"]  { z-index: 1; }

.Index-Page .tabs.type1  { font-size: var(--font-s);}
.Index-Page .tabs.type1:after  { content: ""; display: block; position: absolute; bottom: 0; min-width: 100%; height: 1px; background: var(--color-line3); }
.Index-Page .tabs.type1 >* >* >.label  { min-width: 8rem; height: 4.2rem; overflow: hidden; margin-right: -1px; margin-right: 0; padding: 1rem  0.5rem; border: 1px solid #e7e7e7; border-width: 0; background: #f9f9f9; background-color: Transparent; color: inherit; color: var(--color-text4); }
.Index-Page .tabs.type1 >* >* >.label .o-badge._new  { top: 0; right: -0.5rem; }
.Index-Page .tabs.type1 >* >* >.label[aria-current="page"],
.Index-Page .tabs.type1 >* >* >.label[aria-current="true"],
.Index-Page .tabs.type1 >* >* >.label[aria-selected="true"]  { font-weight: var(--bold-700); border-bottom-width: 2px; border-color: currentColor; border-bottom-color: Transparent; border-bottom-color: currentColor; background: #ffffff; color: var(--color-text1); }


.div-main-welcome  { font-size: var(--font-l); clear: both; color: #003874; }
.div-main-welcome .logo  { position: relative; padding-left:0.7rem }
.div-main-welcome .logo:before  { content: ""; display: block; width: 19rem; height: 6rem; background: url('../images/asset/logo_kiwoom.png') no-repeat 0 /100%; }
.div-main-welcome .logo >.inner  { font-weight: var(--bold-700); font-size: 3rem; line-height: 2.3; position: absolute; left: 0.6rem; top: 0; color: Transparent; letter-spacing: -0.1em; }
.div-main-welcome .message  { margin-top: -0.6rem; padding: 0 0.7rem; }

.div-main-alert  { clear: both; position: fixed; left: 0; right: 0; bottom: 0; }
.Index-Page .div-main-alert  { margin: 0; }
.Index-Page .div-main-alert >.div-wrap  { padding: 0 1rem; }
.div-main-alert .alert  { line-height: 1.42858; position: relative; padding: 0 2rem; padding-right: 3rem; background: var(--color-main1); color: var(--color-white); border-radius: 1.2rem 1.2rem 0 0; }
.div-main-alert .alert .message  { min-height: 4.4rem; }
.div-main-alert .alert .message >a  { display: block; padding: 1.2rem 0; }
.div-main-alert .alert .binds  { font-size: var(--font-4xs); line-height: 1; position: absolute; right: 0; top: 0; }
.div-main-alert .alert .binds >*  { position: relative; min-width: 0; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: Transparent; }
.div-main-alert .alert .binds >* >.inner  { position: absolute; left: 50%; bottom: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); width: 2em; color: Transparent; user-select: none; }
.div-main-alert .alert .binds >:before  { content: ""; display: block; width: 100%; height: 100%; background: none no-repeat 0 /100%; }
.div-main-alert .alert .close  { top: 0.9rem; right: 1rem; }
.div-main-alert .alert .close:before  { background-image: url('../images/layout/ico_nav_close.png'); }

.div-main-utile  { clear: both; }
.div-main-utile.js_varStickyLayout-loaded  { position: absolute; left: 0; right: 0; bottom: 0; margin-bottom: 6rem; }
.div-main-utile.jsui_varStickyLayout-cloned  { display: block !important; z-index: auto; visibility: hidden; }

.div-main-utile .define-list >* >*  { position: relative; }
.div-main-utile .define-list >* >* +*  { border-top: 1px solid #ccc; }
.div-main-utile .define-list .summary  { position: relative; min-height: 9rem; padding: 2.3rem 0 2.2rem; padding-left: 5.4rem; }
.div-main-utile .define-list .summary:before  { content: ""; position: absolute; left: 0; top: 2.5rem; width: 4rem; height: 4rem; background: Red none no-repeat 0 /300%; }
.div-main-utile.is-web .define-list .summary:before  { background-color: Transparent; background-image: url('../images/asset/set_main_define_web.png'); }
.div-main-utile.is-app .define-list .summary:before  { background-color: Transparent; background-image: url('../images/asset/set_main_define_app.png'); }
.div-main-utile .define-list >* >:nth-child(1) >.summary:before  { background-position: 0; }
.div-main-utile .define-list >* >:nth-child(2) >.summary:before  { background-position: 50%; }
.div-main-utile .define-list >* >:nth-child(3) >.summary:before  { background-position: 100%; }
.div-main-utile .define-list .summary .subject  { font-weight: var(--bold-700); font-size: var(--font-m); display: block; }
.div-main-utile .define-list .summary .description  { color: #000; }
.div-main-utile .define-list .summary .description .emph  { font-family: var(--typo-sans-en); font-style: italic; font-weight: var(--bold-700); font-size: var(--font-m); display: inline-block; margin: -0.2rem 0 -0.1rem; color: var(--color-point2); }
.div-main-utile .define-list .launch-button  { position: absolute; right: 0; bottom: 0; clip: rect(0 0 0 0); clip: rect(0,0,0,0); clip-path: circle(0); }

.div-main-utile .anchor-list  { font-size: var(--font-xs); line-height: 1.38462; text-align: center; padding:0 1rem; width:100%; }
.div-main-utile * +.anchor-list { margin-top: 3.5rem; }
.div-main-utile .anchor-list a { display: block; height: 4rem; padding: 0 0.5rem; border: 1px solid var(--color-point1); color: var(--color-point1); border-radius: .6rem; line-height:4rem; }
.div-main-utile .anchor-list.type02 a { display: block; height: 4rem; padding: 0 0.5rem; background: var(--color-point1); color: var(--color-white); border-radius: .6rem; line-height:4rem; }
.div-main-utile .anchor-list >*  { display: -ms-flexbox; display: -moz-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;  }
.div-main-utile .anchor-list >* >*  { width: 100%; }
.div-main-utile .anchor-list li + li { margin-left:0.5rem}
.div-main-utile .anchor-list + .define-list { margin-top:3.5rem;}
.div-main-utile .define-list {padding: 0 1rem;}

.div-main-yesloan  { clear: both; font-size: var(--font-s); }
.div-main-yesloan .card  { max-width: var(--breakpoint-max); max-width: calc(var(--breakpoint-max) - 4rem); min-height: 11rem; padding: 1.7rem 2rem; background: url('../images/asset/bg_main_yesloan.png') no-repeat 100% 100% /12.9rem; background-color: var(--color-main1); color: var(--color-white); }
.div-main-yesloan .card .caption  { font-weight: var(--bold-700); font-size: var(--font-l); line-height: 1.33334; width: 9em; }
.div-main-yesloan .card .binds  { margin-top: 0.7rem; opacity: 0.5; }
.div-main-yesloan .card .binds .launch-button  { position: relative; padding-right: 2.2rem; }
.div-main-yesloan .card .binds .launch-button:after  { content: ""; display: inline-block; vertical-align: middle; position: absolute; right: 0; bottom: -0.3rem; width: 2.6rem; height: 2.6rem; background: url('../images/common/btn_anchor_-i.png') no-repeat 0 /100%; }

.div-main-latest  { clear: both; }
.div-main-latest .list  { display: table; table-layout: fixed; width: 100%; }
.div-main-latest .list >*  { padding: 2.3rem 0; border-bottom: 1px solid var(--color-line2); }
.div-main-latest .list >.nodata  { font-size: var(--font-m); padding: 3.3rem 0 0; border-bottom-width: 0; color: var(--color-text4); text-align: center; }
.Index-Page .div-main-latest .latest .list >*  { padding-right: 2rem; }
.Index-Page .div-main-latest .latest .list >.nodata  { padding-right: 4rem; }
.div-main-latest .list >* >*  { display: block; }
.div-main-latest .list .head  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.div-main-latest .list .data  { margin-top: 0.4rem; font-size: var(--font-xs); color: var(--color-text2); }
.div-main-latest .swiper-controls  { visibility: hidden; }


/**	Sectioning-Area Level
 ------------------------ */

.dom-main .div-main-alert  { z-index: 10; }