@charset "utf-8";

/*--------------------------------------------------------------------------------
	# 컨텐츠 : 공통
---------------------------------------------------------------------------------*/
.main-section {position:relative;margin:20px 0;}
.main-section h2 {font-size:20px;line-height:26px;color:#333;font-weight:700;letter-spacing:-1px;}
.main-section > .section {position:relative;width:770px;min-height:26px;margin:0 auto;padding:35px 30px 35px 180px;}
.main-section > .section h2, .main-section > .section .sub {position:absolute;left:30px;top:35px;}
.main-section > .section .sub {left:32px;top:70px;padding-right:14px;font-size:12px;color:#929292;}
.main-section > .section .sub:before, .main-section > .section .sub:after {content:'';display:block;position:absolute;top:50%;right:1px;margin:-3px 0;width:0;height:0;border:4px solid transparent;border-left-color:#fff;}
.main-section > .section .sub:before {right:0;border-left-color:#929292;}
.main-section > .section + .section:before {content:'';position:absolute;left:30px;right:30px;top:0;border-top:1px dotted #ccc;}

/*--------------------------------------------------------------------------------
	# 컨텐츠 : 빠른메뉴
---------------------------------------------------------------------------------*/
.main-con1 {overflow:hidden;width:980px;height:80px;margin:-40px auto 0;background:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,0.1);z-index:1;}
.main-con1 ul {float:left;display:block;overflow:hidden;height:40px;padding:20px 10px;}
.main-con1 ul.menu1{padding:19px 10px 21px;}
.main-con1 ul li {float:left;}
.main-con1 ul li a {padding:0 22px;font-size:16px;line-height:40px;color:#434343;letter-spacing:-2px;}
.main-con1 ul.menu1 {background:#ffce0b;}
.main-con1 ul.menu1 li a {color:#000;font-size:17px;font-weight:normal;padding:0 20px;letter-spacing:-1px;}
.main-con1 ul.menu1 + ul li + li {position:relative;margin:0 0 0 1px;}
.main-con1 ul.menu1 + ul li + li:before {content:'';display:block;position:absolute;left:-1px;top:50%;width:1px;height:16px;margin:-8px 0;background:#ddd;}

@media \0screen\,screen\9 {
	.main-con1 {border:1px solid #ddd;}
}

/*--------------------------------------------------------------------------------
	# 컨텐츠 : 새소식, 이벤트
---------------------------------------------------------------------------------*/
.main-con2 {overflow:hidden;width:980px;margin:20px auto 0;}
.main-con2 > .section {float:left;width:335px;padding-left:125px;}
.main-con2 > .section:first-child {width:317px;margin-right:7px;}
.main-con2 > .section + .section:before {display:none;}

.list-board {margin-top:-6px;}
.list-board a {display:block;overflow:hidden;padding:7px 1px 7px 0;}
.list-board a > span, .list-board a > em {display:inline-block;float:left;letter-spacing:-1px;}
.list-board a > span:first-child {overflow:hidden;max-width:66%;color:#666;text-overflow:ellipsis;white-space:nowrap;}
.list-board a > span ~ span {float:right;padding-top:1px;font-size:12px;color:#929292;}
.list-board a > .icon-new {overflow:hidden;width:0;margin:4px 0 3px 5px;padding:0 0 0 15px;line-height:15px;background:#f46600 url('../img/icon_set1.png') no-repeat -30px -160px;vertical-align:top;}
.main-con2 > .section:first-child .list-board a > span:first-child {max-width:70%;}

/*--------------------------------------------------------------------------------
	# 컨텐츠 : 인사이트
---------------------------------------------------------------------------------*/
.main-con3 {margin:14px auto;}
.main-con3 .section {padding:0;width:1000px;}
.main-con3 .area-con {overflow:hidden;position:relative;margin:0 0 0 10px;padding-right:10px;height:265px;*height:140px;}
.main-con3 .area-con ul {position:absolute;left:0;top:0;width:300%;height:246px;*height:121px;}
.main-con3 .area-con ul:after {content:'';display:block;clear:both;}
.main-con3 .area-con ul > li {float:left;position:relative;width:308px;height:100%;background:#fff;border:1px solid #ddd;}
.main-con3 .area-con ul > li + li {margin:0 0 0 25px;}
.main-con3 .area-con ul > li.disabled {visibility:hidden;}
.main-con3 .area-con ul > li a {position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;padding:0 29px;box-shadow:0 0 0 0 rgba(0,0,0,1);-webkit-transition:all 0.2s;transition:all 0.2s;}
.main-con3 .area-con ul > li a > span:first-child {overflow:hidden;display:block;position:relative;margin:-1px -30px;height:125px;box-shadow:inset 0 -5px 10px 0 rgba(0,0,0,0.02);}
.main-con3 .area-con ul > li a > span:first-child:before, .main-con3 .area-con ul > li a > span:first-child:after {content:'';display:block;position:absolute;bottom:0;left:50%;margin:0 -75px;width:150px;height:125px;background:url('../img/icon_set6.png') no-repeat 0 0;}/* 2019-10-23 수정 */
.main-con3 .area-con ul > li a > span:first-child:after {bottom:-10px;background-position:0 -125px;-webkit-transition:all 0.3s;transition:all 0.3s;}
.main-con3 .area-con ul > li a > span {display:block;color:#929292;line-height:1.4;letter-spacing:-1px;}
.main-con3 .area-con ul > li a em {position:absolute;right:0;bottom:0;padding:8px 10px 0;min-width:50px;height:22px;line-height:1;color:#fff;text-align:center;*top:0;z-index:1;}/* 2019-10-11 */
.main-con3 .area-con ul > li a .tit {margin:28px 0 5px;font-size:17px;color:#333;font-weight:normal;}
.main-con3 .area-con ul > li a .tit span {font-weight:bold;}
.main-con3 .area-con ul > li a:hover, .main-con3 .area-con ul > li a:focus {box-shadow:5px 5px 12px 1px rgba(0,0,0,0.1)}
.main-con3 .area-con ul > li a:hover > span:first-child:after, .main-con3 .area-con ul > li a:focus > span:first-child:after {bottom:0;}
.main-con3 .area-con ul > li a:before, .main-con3 .area-con ul > li a:after {content:'';display:block;position:absolute;background-color:#000}
.main-con3 .area-con ul > li a:before {bottom:30px;right:19px;width:21px;height:1px;}
.main-con3 .area-con ul > li a:after {bottom:20px;right:29px;width:1px;height:21px;}

.main-con3 .area-con ul > li.full-obj a > span:first-child:before, 
.main-con3 .area-con ul > li.full-obj a > span:first-child:after {left:0;margin:0;width:100%;background:url('../img/icon_set4_obj_full.png') no-repeat 0 0;} /* 2019-10-11 */

.main-con3 .area-control .ui-btn.stop:before {border-color:#bdb8b8;}
.main-con3 .area-control .ui-btn.play:before {border:4px solid transparent;border-left:6px solid #bdb8b8;}
.main-con3 .area-control .ui-btn.before:before {border:7px solid transparent;border-right-color:#91908c;}
.main-con3 .area-control .ui-btn.next:before {border:7px solid transparent;border-left-color:#91908c;}

.main-con3 .wrap-slider.on-slider .area-con ul > li {float:none;position:absolute;margin:0;}

.main-con3 .area-con ul > li.ico1 a .tit span {overflow:hidden;margin-top:-4px;padding-left:69px;width:0;height:24px;background:url('../img/img_bi1.png') no-repeat 0 0;white-space:nowrap;vertical-align:top;}

.main-con3 .area-con ul > li.ico1 a > span:first-child {background-color:#dcd3c8;}
.main-con3 .area-con ul > li.ico2 a > span:first-child {background-color:#c3dee7;}
.main-con3 .area-con ul > li.ico3 a > span:first-child {background-color:#c7d4e4;}
.main-con3 .area-con ul > li.ico4 a > span:first-child {background-color:#e4cf9c;}
.main-con3 .area-con ul > li.ico5 a > span:first-child {background-color:#d7c9dd;}/* 2019-10-11 */
.main-con3 .area-con ul > li.ico6 a > span:first-child {background-color:#c3c9e7;}/* 2019-10-23 */
.main-con3 .area-con ul > li.ico7 a > span:first-child {background-color:#8fdeec;}/* Liiv M */

.main-con3 .area-con ul > li.ico2 a > span:before {background-position:-150px 0;}
.main-con3 .area-con ul > li.ico3 a > span:before {background-position:-300px 0;}
.main-con3 .area-con ul > li.ico4 a > span:before {background-position:-450px 0;}
.main-con3 .area-con ul > li.ico5 a > span:before {background-position:   0px 0 !important;}/* 2019-10-11 */
.main-con3 .area-con ul > li.ico6 a > span:before {background-position:0 -250px;}/* 2019-10-23 */
.main-con3 .area-con ul > li.ico7 a > span:before {background-position:-141px -260px;}/* Liiv M */

.main-con3 .area-con ul > li.ico2 a > span:after {background-position:-150px -125px;}
.main-con3 .area-con ul > li.ico3 a > span:after {background-position:-300px -125px;}
.main-con3 .area-con ul > li.ico4 a > span:after {background-position:-450px -125px;}
.main-con3 .area-con ul > li.ico5 a > span:after {background-position:   0px -125px !important;}/* 2019-10-11 */
.main-con3 .area-con ul > li.ico6 a > span:after {background-position:   0 -375px}/* 2019-10-23 */
.main-con3 .area-con ul > li.ico7 a > span:after {background-position:-150px -375px}/* Liiv M */

.main-con3 .area-con ul > li.ico1 a em {background-color:#8a7963;}
.main-con3 .area-con ul > li.ico2 a em {background-color:#558493;}
.main-con3 .area-con ul > li.ico3 a em {background-color:#677e9c;}
.main-con3 .area-con ul > li.ico4 a em {background-color:#ba8e41;}
.main-con3 .area-con ul > li.ico5 a em {background-color:#70638a;padding-left:7px;padding-right:7px;}/* 2019-10-11 */
.main-con3 .area-con ul > li.ico6 a em {background-color:#7879b9;}/* 2019-10-23 */
.main-con3 .area-con ul > li.ico7 a em {background-color:#31aae6;}/* Liiv M */

.main-con3 .area-control {text-align:center;}

/*--------------------------------------------------------------------------------
	# 컨텐츠 : 금융상품
---------------------------------------------------------------------------------*/
.main-con4 > .section {padding:30px 0 28px 167px;padding-right:0;width:813px;}

.list-link1 {overflow:hidden;margin:0 -18px;}
.list-link1 li {float:left;width:120px;text-align:center;}
.list-link1 li a {display:block;padding:7px 0;font-size:16px;font-weight:normal;color:#333;}
.list-link1 li a:before {content:'';display:block;margin:0 auto 6px;width:52px;height:52px;background:url('../img/icon_set2.png') no-repeat 0 0;}
.list-link1 li a.ico2:before{background-position:-52px 0;}
.list-link1 li a.ico3:before{background-position:-104px 0;}
.list-link1 li a.ico4:before{background-position:-156px 0;}
.list-link1 li a.ico5:before{background-position:-208px 0;}
.list-link1 li a.ico6:before{background-position:-260px 0;}
.list-link1 li a.ico7:before{background-position:-312px 0;}

/*--------------------------------------------------------------------------------
	# 컨텐츠 : 금융사고예방 / 소비자권익보호
---------------------------------------------------------------------------------*/
.main-con5 {background:#f7f6f6;padding:20px 255px 20px 0 ;}
.main-con5 .section {padding:35px 0 35px 176px;width:549px;}
.main-con5 .section + .section {margin-top:-15px;}
.main-con5 .section + .section:before {top:5px;right:0;}
.main-con5 .section h2 {font-size:18px;}
.main-con5 .section > ul {padding-top:2px;}
.main-con5 .section > ul > li {position:relative;display:inline-block;margin:0 -4px 0 26px;padding-left:11px;width:154px;color:#333;vertical-align:top;*display:inline;*zoom:1;}
.main-con5 .section > ul > li a {color:#333;letter-spacing:-1px;}
.main-con5 .section > ul > li:before {content:'';display:block;position:absolute;top:8px;left:0;width:3px;height:3px;background:#acacac;border-radius:50%;}
.main-con5 .section > ul > li:first-child {margin-left:0;width:149px;}
.main-con5 .section > ul > li:first-child + li {width:163px;}
.main-con5 .section > ul > li > a > strong {margin-bottom:5px;font-weight:normal;color:#333;letter-spacing:-1px;}
.main-con5 .section > ul > li > a > span {display:block;font-size:12.5px;font-weight:400;color:#888;line-height:1.6;}
.main-con5 .section > ul > li .ui-toggle {overflow:hidden;position:relative;padding-left:14px;margin:-3px 0 0 4px;width:0;height:16px;border:1px solid #bebebe;border-radius:2px;vertical-align:middle;*overflow:visible;*width:auto;*height:auto;*padding:0 2px;*margin:0;*font-size:11px;}
.main-con5 .section > ul > li .ui-toggle:before, .main-con5 .section > ul > li .ui-toggle:after {content:'';display:block;position:absolute;top:6px;left:3px;width:0;height:0;border:4px solid transparent;border-top-color:#000;}
.main-con5 .section > ul > li .ui-toggle:after {top:5px;border-top-color:#f7f6f6;}
.main-con5 .section > ul > .toggle-area ul {display:none;position:absolute;margin:8px 0 0 -15px;padding:10px;border:1px solid #ccc;background:#fff;}
.main-con5 .section > ul > .toggle-area ul:before, .main-con5 .section > ul > .toggle-area ul:after {content:'';display:block;position:absolute;top:-14px;left:50%;width:0;height:0;border:7px solid transparent;border-bottom-color:#bbb;}
.main-con5 .section > ul > .toggle-area ul:after {top:-13px;border-bottom-color:#fff;}
.main-con5 .section > ul > .toggle-area ul > li a {position:relative;padding-left:8px;font-size:13px;line-height:20px;white-space:nowrap;color:#888;}
.main-con5 .section > ul > .toggle-area ul > li a:before {content:'';display:block;position:absolute;top:8px;left:0;width:3px;height:3px;background:#666;border-radius:50%;}
.main-con5 .section > ul > .toggle-area ul > li a:hover, .main-con5 .section > ul > .toggle-area ul > li a:focus {text-decoration:underline;}
.main-con5 .section > ul > .toggle-area.open ul {display:block;}
.main-con5 .section > ul > .toggle-area.open .ui-toggle:before, .main-con5 .section > ul > .toggle-area.open .ui-toggle:after {top:1px;border:4px solid transparent;border-bottom-color:#000;}
.main-con5 .section > ul > .toggle-area.open .ui-toggle:after {top:2px;border-bottom-color:#f7f6f6;}
.main-con5 .aside {position:absolute;left:50%;top:33px;margin:0 0 0 280px;}
.main-con5 .section + .section ul li:nth-child(2) a{font-size:13.5px;} /* 2018-12-27 */

.box-info {border:1px solid #ddd;width:206px;height:235px;background:#fff;text-align:center;}
.box-info a {display:block;padding:80px 26px 0;height:65%;height:-webkit-calc(100% - 80px);height:calc(100% - 80px);background:url('../img/img_bi2.png') no-repeat 50% 23px;line-height:1.4;}
.box-info a strong {padding:26px 0 10px;border-top:1px solid #e5e5e5;font-weight:400;color:#333;letter-spacing:-0.5px;}
.box-info a span {font-size:13px;color:#8d8d8d;letter-spacing:-1px;}

/*--------------------------------------------------------------------------------
	# 컨텐츠 : KB APP
---------------------------------------------------------------------------------*/
.main-con6 {margin:55px 0 0;}
.main-con6 .section {width:920px;padding:0 30px 0;}
.main-con6 .section h2 {position:static;margin:0 0 25px;}

.list-link2 {overflow:hidden;margin:0 -28px 0 -24px;}
.list-link2 li {float:left;width:108px;}
.list-link2 li a {display:block;position:relative;text-align:center;font-size:13px;color:#333;font-weight:bold;z-index:1;}/* 2019-11-06 수정 */
.list-link2 li a:before {content:'';display:block;margin:0 auto 11px;width:60px;height:60px;background:url('../img/icon_set3_1017.png') no-repeat 0 0;}
.list-link2 li a:after {content:'';display:block;position:relative;margin:-6px auto 0;width:0;height:4px;background:#ffcf0f;background:rgba(255,207,15,0.5);-webkit-transition:all 0.3s;transition:all 0.3s;z-index:-1;}/* 2019-10-23 수정 */
.list-link2 li a:hover:after, .list-link2 li a:focus:after {width:64px;}

.list-link2 li a.ico2:before{background-position:-60px 0;}
.list-link2 li a.ico3:before{background-position:-120px 0;}
.list-link2 li a.ico4:before{background-position:-180px 0;}
.list-link2 li a.ico5:before{background-position:-240px 0;}
.list-link2 li a.ico6:before{background-position:-300px 0;}
.list-link2 li a.ico7:before{background-position:-360px 0;}
.list-link2 li a.ico8:before{background-position:-420px 0;}
.list-link2 li a.ico9:before{background-position:-480px 0;}

.list-link2 li a.ico5:hover:after, .list-link2 li a.ico5:focus:after {width:25px}
.list-link2 li a.ico6:hover:after, .list-link2 li a.ico6:focus:after {width:58px}
.list-link2 li a.ico7:hover:after, .list-link2 li a.ico7:focus:after {width:55px}
.list-link2 li a.ico8:hover:after, .list-link2 li a.ico8:focus:after {width:38px}
.list-link2 li a.ico9:hover:after, .list-link2 li a.ico9:focus:after {width:48px}

/*--------------------------------------------------------------------------------
	# 컨텐츠 : 슬라이드 인디게이터 기본
---------------------------------------------------------------------------------*/
.area-control ul, .area-control ul li, .area-control .ui-btn {display:inline-block;vertical-align:top;line-height:20px;*display:inline;*zoom:1;}
.area-control ul > li > a, .area-control .ui-btn {overflow:hidden;position:relative;padding-left:16px;width:0;height:20px;}
.area-control ul > li > a:before, .area-control .ui-btn:before {content:'';display:block;position:absolute;left:50%;top:50%;}
.area-control ul > li > a {overflow:hidden;display:block;position:relative;width:0;height:20px;padding:0 0 0 12px;white-space:nowrap;-webkit-transition:all 0.3s;transition:all 0.3s;}
.area-control ul > li > a:before {left:3px;right:3px;height:6px;margin:-3px 0 0;border-radius:3px;background:#a3a3a3;}
.area-control ul > li > a.on {padding-left:23px;}
.area-control ul > li > a.on:before {background:#6d6d6a;}
.area-control .ui-btn.next {margin:0 0 0 12px;}
.area-control .ui-btn.before {margin:0 12px 0 0;}
.area-control .ui-btn.before:before, .area-control .ui-btn.next:before,
.area-control .ui-btn.before:after, .area-control .ui-btn.next:after {content:'';position:absolute;left:50%;top:50%;width:0;height:0;display:block;}
.area-control .ui-btn.before:before {margin:-7px -9px;border:7px solid transparent;border-right-color:#333;}
.area-control .ui-btn.before:after {margin:-5px -5px;border:5px solid transparent;border-right-color:#fff;}
.area-control .ui-btn.next:before {margin:-7px -2px;border:7px solid transparent;border-left-color:#333;}
.area-control .ui-btn.next:after {margin:-5px -2px;border:5px solid transparent;border-left-color:#fff;}
.area-control .ui-btn.stop, .area-control .ui-btn.play {margin:0 0 0 3px;}
.area-control .ui-btn.stop:before {margin:-3px -3px;width:2px;height:7px;border-left:2px solid #333;border-right:2px solid #333;}
.area-control .ui-btn.play:before {margin:-4px -3px;width:0;height:0;border:4px solid transparent;border-left:6px solid #333;}
.area-control .ui-btn.off {display:none;}

/*--------------------------------------------------------------------------------
	# 컨텐츠 : 상단비주얼
---------------------------------------------------------------------------------*/
.wrap-visual {position:relative;height:530px;}

/* 컨텐츠 공통 */
.wrap-visual .area-con {position:relative;width:980px;height:530px;margin:0 auto;}
.wrap-visual .area-con > ul > li {position:absolute;left:0;top:0;color:#333;z-index:-1;visibility:hidden;}
.wrap-visual .area-con > ul > li > div {position:relative;width:920px;height:270px;padding:160px 30px 100px;}
.wrap-visual .area-con > ul > li:before, .wrap-visual .area-con > ul > li:after {content:'';display:block;position:absolute;right:30px;bottom:40px;width:640px;height:401px;opacity:0;z-index:-1;-webkit-transition:all 1.5s;transition:all 1.5s;}
.wrap-visual .area-con > ul > li:before {bottom:0;opacity:0.5;}
.wrap-visual .area-con > ul > li > div > span, .wrap-visual .area-con > ul > li > div > strong, .wrap-visual .area-con > ul > li > div > a.link {display:block;opacity:0;margin-left:20px;-webkit-transition:all 0.6s;transition:all 0.6s;}
.wrap-visual .area-con > ul > li > div > span {font-size:19px;line-height:28px;color:#5c5c5c;}
.wrap-visual .area-con > ul > li > div > span:first-child {font-size:25px;line-height:40px;color:#333;}
.wrap-visual .area-con > ul > li > div > strong {display:block;font-size:40px;line-height:52px;font-weight:normal;letter-spacing:-4px;}
.wrap-visual .area-con > ul > li > div > strong .eng{letter-spacing:-1px;}
.wrap-visual .area-con > ul > li > div > strong span {font-weight:700;}
.wrap-visual .area-con > ul > li > div > strong + span {margin-top:20px;}
.wrap-visual .area-con > ul > li > div > a.link {display:inline-block;margin-top:27px;font-size:15px;line-height:20px;color:#222;border-bottom:1px solid #222;vertical-align:top;}
.wrap-visual .area-con > ul > li.on {z-index:0;visibility:visible;opacity:1;}
.wrap-visual .area-con > ul > li.on:before, .wrap-visual .area-con > ul > li.on:after {opacity:1;}
.wrap-visual .area-con > ul > li.on:before {bottom:40px;}
.wrap-visual .area-con > ul > li.on:after {-webkit-transition-delay:1.2s;transition-delay:1.2s;}
.wrap-visual .area-con > ul > li.on > div > span, .wrap-visual .area-con > ul > li.on > div > strong, .wrap-visual .area-con > ul > li.on > div > a.link {opacity:1;margin-left:0;}
.wrap-visual .area-con > ul > li.on > div > strong {-webkit-transition-delay:0.2s;transition-delay:0.2s;}
.wrap-visual .area-con > ul > li.on > div > span {-webkit-transition-delay:0.4s;transition-delay:0.4s;letter-spacing:-1px;}
.wrap-visual .area-con > ul > li.on > div > a.link {-webkit-transition-delay:0.6s;transition-delay:0.6s;}
.wrap-visual .area-con > ul > li.on > div > span:first-child {-webkit-transition-delay:0.2s;transition-delay:0.2s;}
.wrap-visual .area-con > ul > li.on > div > strong {-webkit-transition-delay:0.4s;transition-delay:0.4s;}
.wrap-visual .area-con > ul > li.on > div > span {-webkit-transition-delay:0.6s;transition-delay:0.6s;}
.wrap-visual .area-con > ul > li.on > div > a.link {-webkit-transition-delay:0.8s;transition-delay:0.8s;}
.wrap-visual .area-con > ul > li > strong.icon1 {}

.wrap-visual .area-control {position:absolute;left:50%;bottom:80px;width:910px;margin:0 0 0 -490px;padding:0 25px;}

.wrap-visual .area-aside {position:absolute;right:50%;bottom:60px;margin:0 -490px 0 0;}
.wrap-visual .area-aside a {position:relative;width:70px;height:68px;padding:15px;font-size:13px;line-height:16px;color:#635f5b;background:rgba(255,255,255,0.5);box-shadow:0 0 5px 0 rgba(0,0,0,0.05);}
.wrap-visual .area-aside a:before {content:'';position:absolute;left:15px;bottom:12px;width:30px;height:30px;background:url('../img/icon_set1.png') no-repeat -320px -85px;}

@media \0screen\,screen\9 {
	.wrap-visual .area-aside a {background:#fff;}
}

/*--------------------------------------------------------------------------------
	# 컨텐츠 : 상단비주얼 : 변경컨텐츠
---------------------------------------------------------------------------------*/
/* 슬라이드컨텐츠 : 기본(섹션1 색상유지) */
.wrap-visual {background:#f4efec}
.wrap-visual .area-control .ui-btn.before:after {border-right-color:#f4efec;}
.wrap-visual .area-control .ui-btn.next:after {border-left-color:#f4efec;}


/* 슬라이드컨텐츠 : section13 : NCSI */
.wrap-visual.active1 {background:#f4efec;}
.wrap-visual.active1 .area-control .ui-btn.before:after {border-right-color:#f4efec;}
.wrap-visual.active1 .area-control .ui-btn.next:after {border-left-color:#f4efec;}

/* 슬라이드컨텐츠 : section11 : 오픈뱅킹 */
.wrap-visual.active2 {background:#fbebba;}
.wrap-visual.active2 .area-control .ui-btn.before:after {border-right-color:#fbebba;}
.wrap-visual.active2 .area-control .ui-btn.next:after {border-left-color:#fbebba;}

/* 슬라이드컨텐츠 : section10 : 외환 */
.wrap-visual.active3 {background:#cfe1f6;}
.wrap-visual.active3 .area-control .ui-btn.before:after {border-right-color:#cfe1f6;}
.wrap-visual.active3 .area-control .ui-btn.next:after {border-left-color:#cfe1f6;}

/* 슬라이드컨텐츠 : section9 : 스타뱅킹 */
.wrap-visual.active4 {background:#c9e5ff;}/* 2010-10-23 */
.wrap-visual.active4 .area-control .ui-btn.before:after {border-right-color:#c9e5ff;}
.wrap-visual.active4 .area-control .ui-btn.next:after {border-left-color:#c9e5ff;}

/* 슬라이드컨텐츠 : section4 : LiivM x BTS */
.wrap-visual.active5 {background:#cbecf0;}
.wrap-visual.active5 .area-control .ui-btn.before:after {border-right-color:#cbecf0;}
.wrap-visual.active5 .area-control .ui-btn.next:after {border-left-color:#cbecf0;}

/* 슬라이드컨텐츠 : section5 : KB모바일인증서 */
.wrap-visual.active6 {background:#dbe8f9;}
.wrap-visual.active6 .area-control .ui-btn.before:after {border-right-color:#dbe8f9;}
.wrap-visual.active6 .area-control .ui-btn.next:after {border-left-color:#dbe8f9;}

/* 슬라이드컨텐츠 : section6 : 겨울시 */
.wrap-visual.active7 {background:#e9e4dc;}
.wrap-visual.active7 .area-control .ui-btn.before:after {border-right-color:#e9e4dc;}
.wrap-visual.active7 .area-control .ui-btn.next:after {border-left-color:#e9e4dc;}

/* 슬라이드컨텐츠 : 섹션1 : 갤럭시 */
.wrap-visual .area-con > ul > li.section1 .txt-logo1 {overflow:hidden;width:0;height:62px;padding:0 0 0 335px;background:url('../img/visual/visual_section1_logo.png') no-repeat 0 50%;}


/* 슬라이드컨텐츠 : 비주얼 : 기본 */
.wrap-visual .area-con > ul > li.section12:before {background:url('../img/visual/visual_section19_1.png') no-repeat 100% 0;}/*NCSI*/
.wrap-visual .area-con > ul > li.section13:before {background:url('../img/visual/visual_section20_1.png') no-repeat 100% 0;}/*liivM BTS*/
.wrap-visual .area-con > ul > li.section4:before {background:url('../img/visual/visual_section12_1.png') no-repeat 100% 0;}/*KBbrige*/
.wrap-visual .area-con > ul > li.section5:before {background:url('../img/visual/visual_section11_1.png') no-repeat 100% 0;}/*KB모바일인증서*/
.wrap-visual .area-con > ul > li.section9:before {background:url('../img/visual/visual_section9_1.png') no-repeat 100% 0;} /*KB스타뱅킹*/
.wrap-visual .area-con > ul > li.section10:before {background:url('../img/visual/visual_section15_1.png') no-repeat 100% 0;}/* 외환 */
.wrap-visual .area-con > ul > li.section11:before {background:url('../img/visual/visual_section16_1.png') no-repeat 100% 0;}/* 오픈뱅킹 */
.wrap-visual .area-con > ul > li.section6:before {background:url('../img/visual/visual_section18_1.png') no-repeat 100% 0;}/* 시즈널 */

/* 슬라이드컨텐츠 : 비주얼 : 두번째컷 */
.wrap-visual .area-con > ul > li.section12:after {background:url('../img/visual/visual_section19_2.png') no-repeat 100% 0;}/*NCSI*/
.wrap-visual .area-con > ul > li.section13:after {background:url('../img/visual/visual_section20_2.png') no-repeat 100% 0;}/*liivM BTS*/
.wrap-visual .area-con > ul > li.section4:after {background:url('../img/visual/visual_section12_2.png') no-repeat 100% 0;}/*KBbrige*/
.wrap-visual .area-con > ul > li.section5:after {background:url('../img/visual/visual_section11_2.png') no-repeat 100% 0;}/*KB모바일인증서*/
.wrap-visual .area-con > ul > li.section9:after {background:url('../img/visual/visual_section9_2.png') no-repeat 100% 0;}/*KB스타뱅킹*/
.wrap-visual .area-con > ul > li.section10:after {background:url('../img/visual/visual_section15_2.png') no-repeat 100% 0;}/* 외환 */
.wrap-visual .area-con > ul > li.section11:after {background:url('../img/visual/visual_section16_2.png') no-repeat 100% 0;}/* 오픈뱅킹 */
.wrap-visual .area-con > ul > li.section6:after {background:url('../img/visual/visual_section18_2.png') no-repeat 100% 0;}/* 시즈널 */

/*
.wrap-visual .area-con > ul > li.section1:before {background:url('../img/visual/visual_section1m_1.png') no-repeat 100% 0;}
.wrap-visual .area-con > ul > li.section12:before {background:url('../img/visual/visual_section17_1.png') no-repeat 100% 0;}/*LiivM
.wrap-visual .area-con > ul > li.section12:after {background:url('../img/visual/visual_section17_2.png') no-repeat 100% 0;}/*LiivM*
.wrap-visual .area-con > ul > li.section2:before {background:url('../img/visual/visual_section2_1.png') no-repeat 100% 0;}
.wrap-visual .area-con > ul > li.section3:before {background:url('../img/visual/visual_section3_1.png') no-repeat 100% 0;}
.wrap-visual .area-con > ul > li.section6:before {background:url('../img/visual/visual_section6_1_201903.png') no-repeat 100% 0;}
.wrap-visual .area-con > ul > li.section8:before {background:url('../img/visual/visual_section14_1.png') no-repeat 100% 0;}
.wrap-visual .area-con > ul > li.section1:after {background:url('../img/visual/visual_section1n_2.png') no-repeat 100% 0;}
.wrap-visual .area-con > ul > li.section2:after {background:url('../img/visual/visual_section2_2.png') no-repeat 100% 0;}
.wrap-visual .area-con > ul > li.section3:after {background:url('../img/visual/visual_section3_2.png') no-repeat 100% 0;}
.wrap-visual .area-con > ul > li.section6:after {background:url('../img/visual/visual_section6_2_201903.png') no-repeat 100% 0;}
.wrap-visual .area-con > ul > li.section8:after {background:url('../img/visual/visual_section14_2.png') no-repeat 100% 0;}
*/
/*--------------------------------------------------------------------------------
	# 컨텐츠 : 브랜드스토리
---------------------------------------------------------------------------------*/
body.on-brand .wrapAll {height:100%;overflow:hidden;}

/* 레이아웃 */
.pop-section {display:none;position:relative;margin:auto;width:100%;height:100%;background:#000;color:#fff;}
.pop-section .header, .pop-section .content {position:relative;}
.pop-section .header {z-index:50;}
.pop-section .header h2, .pop-section .header .ui-close {position:absolute;overflow:hidden;display:block;width:0;top:40px;border:0;}
.pop-section .header h2 {left:60px;height:24px;line-height:24px;margin:18px 0;padding:0 0 0 150px;background:url('../img/icon_set1.png') no-repeat 0 -120px;}
.pop-section .header .ui-close {right:40px;height:60px;line-height:60px;padding:0 0 0 60px;cursor:pointer;background:rgba(0,0,0,0.6);}
.pop-section .header .ui-close:before, .pop-section .header .ui-close:after {content:'';display:block;position:absolute;left:50%;top:50%;width:22px;height:2px;margin:-1px 0 0 -11px;background:#fff;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;}
.pop-section .content {width:100%;height:100%;}
.pop-section.open {display:block;position:fixed;left:0;top:0;right:0;bottom:0;z-index:9999;}
.pop-section.open .header .ui-close:before {-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);}
.pop-section.open .header .ui-close:after {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);}

@media \0screen\,screen\9 {
	.pop-section .header .ui-close {background:#353432 url('../img/icon_set1.png') no-repeat -230px -110px;}
	.pop-section .header .ui-close:before, .pop-section .header .ui-close:after {display:none;}
}

/* 인디게이터 */
.wrap-story .area-control > div {position:absolute;left:0;right:0;bottom:0;padding:30px 0;text-align:center;}
.wrap-story .area-control > div, .wrap-story .area-control ul, .wrap-story .area-control .ui-btn {z-index:50;}
.wrap-story .area-control ul > li > a {padding-left:85px;}
.wrap-story .area-control ul > li > a:before, .wrap-story .area-control ul > li > a:after {content:'';position:absolute;left:3px;top:50%;height:2px;margin:-1px 0 0;border-radius:0;}
.wrap-story .area-control ul > li > a:before {right:3px;background:#a29d92;}
.wrap-story .area-control ul > li > a:after {width:0;background:#ffcf10;}
.wrap-story .area-control ul > li > a.on:after {width:79px;-webkit-transition:all 5.0s;transition:all 5.0s;}
.wrap-story .area-control .ui-btn {position:absolute;top:50%;padding-left:40px;height:40px;margin:-20px 0 0;background:url('../img/icon_set1.png') no-repeat -160px -200px;z-index:50;}
.wrap-story .area-control .ui-btn:before, .wrap-story .area-control .ui-btn:after {display:none;}
.wrap-story .area-control .ui-btn.before {left:50px;background-position:-160px -120px;}
.wrap-story .area-control .ui-btn.next {right:50px;background-position:-200px -120px;}
.wrap-story .area-control .ui-btn.stop, .wrap-story .area-control .ui-btn.play {background:url('../img/icon_set1.png') no-repeat -280px -120px;}
.wrap-story .area-control .ui-btn.stop {background-position:-280px -120px;}
.wrap-story .area-control .ui-btn.play {background-position:-320px -120px;}

/* 컨텐츠 */
.wrap-story, .wrap-story .area-con, .wrap-story .area-con > ul {width:100%;height:100%;}
.wrap-story .area-con {position:relative;overflow:hidden;}
.wrap-story .area-con > ul > li {position:absolute;left:0;right:0;top:0;bottom:0;text-align:center;}
.wrap-story .area-con > ul > li > span {display:block;position:absolute;opacity:0;}
.wrap-story .area-con > ul > li > span.img {content:'';left:50%;top:0;width:auto;height:auto;opacity:1;min-width:100%;min-height:100%;margin:0 0 0 -50%;transform:scale(1.1);-webkit-transition:all 4.5s;transition:all 4.5s;}
.wrap-story .area-con > ul > li > span.img + span {left:100px;right:100px;top:50%;font-size:48px;line-height:54px;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#fff;font-weight:700;-webkit-transition:all 2.0s;transition:all 2.0s;-webkit-transition-delay:0.2s;transition-delay:0.2s;}
.wrap-story .area-con > ul > li.on {z-index:1;}
.wrap-story .area-con > ul > li.on > span {opacity:1;}
.wrap-story .area-con > ul > li.on > span.img {transform:scale(1.0);}

.wrap-story .area-con > ul > li > span.img {background:url('../img/visual/visual_brand1.jpg') no-repeat 50% 100%;background-size:cover;}
.wrap-story .area-con > ul > li.brand1 > span.img {background:url('../img/visual/visual_brand1.jpg') no-repeat 100% 100%;background-size:cover;}
.wrap-story .area-con > ul > li.brand2 > span.img {background:url('../img/visual/visual_brand2.jpg') no-repeat 0 100%;background-size:cover;}
.wrap-story .area-con > ul > li.brand3 > span.img {background:url('../img/visual/visual_brand3.jpg') no-repeat 50% 50%;background-size:cover;}
.wrap-story .area-con > ul > li.brand4 > span.img {background:url('../img/visual/visual_brand4.jpg') no-repeat 0 50%;background-size:cover;}
.wrap-story .area-con > ul > li.brand5 > span.img {background:url('../img/visual/visual_brand5.jpg') no-repeat 50% 100%;background-size:cover;}

/* 상단안내공지 */
.topNoticelayer{background-color:#3e3832;}
.topNoticelayer .inner{width:980px;margin:0 auto;}
.topNoticelayer .inner dl{overflow: hidden; height:105px; padding:28px 0 32px 0;}
.topNoticelayer .inner dl dt{float:left; width:289px; height:105px; margin-top: 2px; margin-right:31px; font-size:0em; background:url('../img/topNotice_tit.png') no-repeat 0 0;}
.topNoticelayer .inner dl dd{float:left; width:660px; color:#e1e1e0; font-size:13px;letter-spacing:-0.5px; line-height: 1.4em;}
.topNoticelayer .inner dl dd strong{display:block; margin-top:6px;}
.topNoticelayer .inner dl dd.space{margin-top:8px;}
.topNoticelayer .inner dl dd.space a{color:#ffcc00;font-size:14px;text-decoration: underline;}
.topNoticelayer .inner {position:relative;}
.topNoticelayer .inner .closeWrap {position:absolute; right:10px; bottom:24px; vertical-align:baseline;}
.topNoticelayer .inner .closeWrap input {width:15px; height:15px; margin-right:8px; font-size:12px; vertical-align:middle;}
.topNoticelayer .inner .closeWrap label {margin-right:23px; font-size:12px; color:#fff; vertical-align:bottom;}
.topNoticelayer .inner .closeWrap a.nClose {display:inline-block; font-size:12px; color:#fff; padding:0 20px 0 0; background:url('../img/today_close_btn.png') no-repeat right 50%; background-size:12px 12px; vertical-align:bottom;}