@charset "UTF-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button{margin:0;padding:0}
fieldset,img{border:0 none}
dl,ul,ol,menu,li{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none}
input,select,textarea,button{vertical-align:middle;font-size:100%}
button{border:0 none;background-color:transparent;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
body{min-width:320px;background-color:#fff;-webkit-text-size-adjust:none}
input:checked[type='checkbox']{background-color:#666; -webkit-appearance:checkbox}
input[type='text'],input[type='password'],input[type='submit'],input[type='search'],input[type='tel'],input[type='email'],html input[type='button'],input[type='reset']{-webkit-appearance:none;border-radius:0}
input[type='search']::-webkit-search-cancel-button{-webkit-appearance:none}
body,th,td,input,select,textarea,button{font-size:14px;line-height:1.5;  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic','맑은 고딕', system-ui, sans-serif;color:#000}
a{color:#005a96;text-decoration:none}
a:active, a:hover{text-decoration:none}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
hr {border: 0 none;}

.ir{
	display: block;
	overflow: hidden;
	color: transparent;
	white-space: nowrap;
}
.screen-out{
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}
.hide{display:none}

body {
	background: #72d7ac;
}

/* canvas */
#canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 600px;
}

.kabang-wrap {
	overflow: hidden;
	width: 100%;
}
.section1 {
	position: relative;
	height: 544px;
	padding: 56px 0 0 0;
	border-bottom: 3px solid #000;
}
.section1 .jumbotron {
	margin: 0 auto;
}
.jordy {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 30;
	width: 300px;
	height: 180px;
	margin-left: -140px;
}
.jordy .crest {
	position: absolute;
	top: 25px;
	left: 51px;
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
}
.jordy .frame2 .crest {
	top: 27px;
	transform: matrix(1.1, -0.1, 0, 1, 0, 0) rotate(10deg);
	-webkit-transform: matrix(1.1, -0.1, 0, 1, 0, 0) rotate(10deg);
}
.jordy .frame3 .crest {
	top: 35px;
	left: 43px;
	transform: matrix(1, -0.2, 0.1, 1, 0, 0) rotate(10deg);
	-webkit-transform: matrix(1, -0.2, 0.1, 1, 0, 0) rotate(10deg);
}
.jordy .frame4 .crest,
.jordy .frame5 .crest {
	top: 35px;
	left: 41px;
	transform: matrix(1.1, -0.2, 0.2, 1, 0, 0) rotate(10deg);
	-webkit-transform: matrix(1.1, -0.2, 0.2, 1, 0, 0) rotate(10deg);
}
.jordy .frame6 .crest {
	top: 37px;
	left: 43px;
	transform: matrix(1.1, -0.2, 0.2, 1, 0, 0) rotate(10deg);
	-webkit-transform: matrix(1.1, -0.2, 0.2, 1, 0, 0) rotate(10deg);
}
.jordy .frame7 .crest {
	top: 38px;
	left: 43px;
	transform: matrix(1.1, -0.2, 0.1, 1, 0, 0) rotate(5deg);
	-webkit-transform: matrix(1.1, -0.2, 0.1, 1, 0, 0) rotate(5deg);
}
.jordy .frame8 .crest {
	top: 28px;
	left: 52px;
	transform: matrix(1.3, -0.3, 0.4, 0.9, 0, 0) rotate(18deg);
	-webkit-transform: matrix(1.3, -0.3, 0.4, 0.9, 0, 0) rotate(18deg);
}
.jordy .frame9 .crest {
	top: 27px;
	left: 52px;
	transform: matrix(1.2, -0.3, 0.4, 1, 0, 0) rotate(23deg);
	-webkit-transform: matrix(1.2, -0.3, 0.4, 1, 0, 0) rotate(23deg);
}
.jordy .frame10 .crest {
	top: 25px;
	left: 53px;
	transform: matrix(1.1, -0.3, 0.4, 1, 0, 0) rotate(25deg);
	-webkit-transform: matrix(1.1, -0.3, 0.4, 1, 0, 0) rotate(25deg);
}
.jordy .frame11 .crest {
	top: 27px;
	left: 53px;
	transform: matrix(1.1, -0.3, 0.4, 1, 0, 0) rotate(25deg);
	-webkit-transform: matrix(1.1, -0.3, 0.4, 1, 0, 0) rotate(25deg);
}
.jordy .body {
	position: absolute;
	top: 34px;
	left: 50px;
	overflow: hidden;
	height: 146px;
}
.jordy .body svg {
	display: none;
}
.jordy .frame1 .body .move1 {
	display: block;
}
.jordy .frame2 .body .move2 {
	display: block;
}
.jordy .frame3 .body .move3 {
	display: block;
}
.jordy .frame4 .body .move4,
.jordy .frame5 .body .move4 {
	display: block;
}
.jordy .frame6 .body .move5 {
	display: block;
}
.jordy .frame7 .body .move6 {
	display: block;
}
.jordy .frame8 .body .move7 {
	display: block;
}
.jordy .frame9 .body .move8 {
	display: block;
}
.jordy .frame10 .body .move9 {
	display: block;
}
.jordy .frame11 .body .move10 {
	display: block;
}
.jordy .face {
	position: absolute;
	top: 57px;
	left: 110px;
}
.jordy .forehead {
	position: absolute;
	top: 57px;
	left: 110px;
	overflow: hidden;
	height: 50px;
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
}
.jordy .frame2 .forehead {
	top: 59px;
	left: 109px;
	transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
}
.jordy .frame3 .forehead {
	top: 60px;
	left: 103px;
	transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
}
.jordy .frame4 .forehead,
.jordy .frame5 .forehead {
	top: 59px;
	left: 101px;
	transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
}
.jordy .frame6 .forehead {
	top: 60px;
	left: 100px;
	transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
}
.jordy .frame7 .forehead {
	top: 61px;
	left: 101px;
	transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
}
.jordy .frame8 .forehead {
	top: 61px;
	left: 103px;
	transform: rotate(7deg);
	-webkit-transform: rotate(7deg);
}
.jordy .frame9 .forehead {
	top: 58px;
	left: 108px;
	transform: rotate(8deg);
	-webkit-transform: rotate(8deg);
}
.jordy .frame10 .forehead {
	top: 56px;
	left: 110px;
	transform: rotate(8deg);
	-webkit-transform: rotate(8deg);
}
.jordy .frame11 .forehead {
	top: 57px;
	left: 111px;
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
}
.jordy .eyes {
	position: absolute;
	top: 89px;
	left: 121px;
	width: 60px;
	height: 60px;
}
.jordy .eyes .path {
	display: none;
}
.jordy .frame2 .eyes {
	top: 89px;
	left: 118px;
}
.jordy .frame2 .eyes .path {
	display: block;
}
.jordy .frame2 .eyes .ellipse {
	display: none;
}
.jordy .frame3 .eyes {
	top: 89px;
	left: 120px;
	transform: rotate(-12deg);
	-webkit-transform: rotate(-12deg);
}
.jordy .frame4 .eyes,
.jordy .frame5 .eyes {
	top: 88px;
	left: 119px;
	transform: rotate(-12deg);
	-webkit-transform: rotate(-12deg);
}
.jordy .frame6 .eyes {
	top: 89px;
	left: 118px;
	transform: rotate(-12deg);
	-webkit-transform: rotate(-12deg);
}
.jordy .frame7 .eyes {
	top: 90px;
	left: 119px;
	transform: rotate(-12deg);
	-webkit-transform: rotate(-12deg);
}
.jordy .frame8 .eyes {
	top: 91px;
	left: 118px;
	transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
}
.jordy .frame9 .eyes {
	top: 89px;
	left: 121px;
	transform: rotate(-4deg);
	-webkit-transform: rotate(-4deg);
}
.jordy .frame10 .eyes {
	top: 87px;
	left: 122px;
	transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
}
.jordy .frame11 .eyes {
	top: 89px;
	left: 122px;
	transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
}
.jordy .mouth {
	position: absolute;
	top: 90px;
	left: 125px;
}
.jordy .mouth .top {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
.jordy .frame2 .mouth .top {
	top: 2px;
	left: -1px;
	transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
}
.jordy .frame3 .mouth .top {
	top: 3px;
	left: -3px;
	transform: rotate(-13deg);
	-webkit-transform: rotate(-13deg);
}
.jordy .frame4 .mouth .top,
.jordy .frame5 .mouth .top {
	top: 3px;
	left: -4px;
	transform: rotate(-13deg);
	-webkit-transform: rotate(-13deg);
}
.jordy .frame6 .mouth .top {
	top: 4px;
	left: -5px;
	transform: rotate(-13deg);
	-webkit-transform: rotate(-13deg);
}
.jordy .frame7 .mouth .top {
	top: 5px;
	left: -4px;
	transform: rotate(-13deg);
	-webkit-transform: rotate(-13deg);
}
.jordy .frame8 .mouth .top {
	top: 3px;
	left: -4px;
	transform: rotate(-4deg);
	-webkit-transform: rotate(-4deg);
}
.jordy .frame9 .mouth .top {
	top: 1px;
	left: -1px;
	transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
}
.jordy .frame10 .mouth .top {
	top: 0px;
	left: 0px;
	transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
}
.jordy .frame11 .mouth .top {
	top: 0px;
	left: 0px;
	transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
}
.jordy .mouth .bottom {
	position: absolute;
	top: 14px;
	left: -1px;
	transform: rotate(-12deg);
	-webkit-transform: rotate(-12deg);
}
.jordy .mouth .bottom svg {
	display: none;
}
.jordy .frame4 .mouth .bottom,
.jordy .frame5 .mouth .bottom {
	left: -2px;
}
.jordy .frame6 .mouth .bottom {
	top: 15px;
	left: -3px;
}
.jordy .frame7 .mouth .bottom {
	top: 16px;
	left: -2px;
}
.jordy .frame8 .mouth .bottom {
	top: 14px;
	left: -3px;
	transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
}
.jordy .frame9 .mouth .bottom {
	top: 12px;
	left: -1px;
	transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
}
.jordy .frame10 .mouth .bottom {
	top: 11px;
	left: 0px;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.jordy .frame3 .mouth .bottom .move3 {
	display: block;
}
.jordy .frame4 .mouth .bottom .move4 {
	display: block;
}
.jordy .frame5 .mouth .bottom .move5 {
	display: block;
}
.jordy .frame6 .mouth .bottom .move6 {
	display: block;
}
.jordy .frame7 .mouth .bottom .move3 {
	display: block;
}
.jordy .frame8 .mouth .bottom .move4 {
	display: block;
}
/*.jordy .frame9 .mouth .bottom .move7 {*/
	/*display: block;*/
/*}*/
/*.jordy .frame10 .mouth .bottom .move5 {*/
	/*display: block;*/
/*}*/
.jordy .deco {
	position: absolute;
	top: 89px;
	left: 88px;
	transform: rotate(12deg);
	-webkit-transform: rotate(12deg);
}
.jordy .frame2 .deco {
	top: 91px;
	left: 89px;
	transform: rotate(8deg);
	-webkit-transform: rotate(8deg);
}
.jordy .frame3 .deco {
	top: 91px;
	left: 86px;
	transform: rotate(1deg);
	-webkit-transform: rotate(1deg);
}
.jordy .frame4 .deco,
.jordy .frame5 .deco {
	top: 90px;
	left: 85px;
	transform: rotate(1deg);
	-webkit-transform: rotate(1deg);
}
.jordy .frame6 .deco {
	top: 91px;
	left: 84px;
	transform: rotate(1deg);
	-webkit-transform: rotate(1deg);
}
.jordy .frame7 .deco {
	top: 92px;
	left: 85px;
	transform: rotate(1deg);
	-webkit-transform: rotate(1deg);
}
.jordy .frame8 .deco {
	top: 90px;
	left: 85px;
	transform: rotate(6deg);
	-webkit-transform: rotate(6deg);
}
.jordy .frame9 .deco {
	top: 89px;
	left: 88px;
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
}
.jordy .frame10 .deco {
	top: 88px;
	left: 88px;
	transform: rotate(11deg);
	-webkit-transform: rotate(11deg);
}
.jordy .frame11 .deco {
	top: 90px;
	left: 89px;
	transform: rotate(11deg);
	-webkit-transform: rotate(11deg);
}
.jordy .left {
	position: absolute;
	top: 153px;
	left: 75px;
}
.jordy .right {
	position: absolute;
	top: 75px;
	left: 142px;
}
.jordy .right svg {
	display: none;
}
.jordy .frame1 .right .move1 {
	display: block;
}
.jordy .frame2 .right .move2 {
	display: block;
}
.jordy .frame3 .right .move3 {
	display: block;
}
.jordy .frame4 .right .move4,
.jordy .frame5 .right .move4 {
	display: block;
}
.jordy .frame6 .right .move5 {
	display: block;
}
.jordy .frame7 .right .move6 {
	display: block;
}
.jordy .frame8 .right .move7 {
	display: block;
}
.jordy .frame9 .right .move8 {
	display: block;
}
.jordy .frame10 .right .move9 {
	display: block;
}
.jordy .frame11 .right .move10 {
	display: block;
}
.section2 {
	padding: 100px 0;
	background-color: #fff59b;
}
.section2 .tit {
	margin: 0 auto 56px;
}
.section2 .slide-emoticon {
	position: relative;
	z-index: 30;
	width: 100%;
	height: 520px;
	outline: none;
}
.slide-emoticon .slick-dots {
	padding: 30px 0;
	text-align: center;
}
.slide-emoticon .slick-dots li {
	display: inline-block;
	margin-left: 10px;
}
.slide-emoticon .slick-dots li:first-child {
	margin-left: 0;
}
.slide-emoticon .slick-dots button {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 5px;
	text-indent: -9999px;
	background-color: #000000;
	opacity: 0.2;
}
.slide-emoticon .slick-dots .slick-active button {
	background-color: #30d691;
	opacity: 1;
}
.section2 .slide-emoticon div {
	outline: none !important;
}
.section2 .slide-emoticon .item {
	width: 100%;
	text-align: center;
}
.section2 .slide-emoticon img[src=''], .section2 .slide-emoticon img:not([src]) {
	opacity: 0;
}
.section2 .slide-emoticon img {
	width: 295px;
	height: 444px;
	margin: 0 auto;
	outline: none;
	border: 0 none;
}
.section2 .slide-emoticon:focus { outline: none !important; }
.section2 .link-emoticon {
	position: relative;
	z-index: 30;
	display:block;
	width: 319px;
	height: 72px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	border-radius: 10px;
	border: solid 3px #222222;
	background-color: #30d691;
	text-align: center;
	box-sizing: border-box;
	box-shadow: 5px 5px 0 #000;
}
.section2 .link-emoticon .txt {
	display: inline-block;
}
.section3 {
	padding: 0 0 70px 0;
	background-color: #fff59b;
}
.section3 .tit {
	margin: 0 auto 40px;
}
.section3 .list-card {
	position: relative;
	z-index: 30;
	width: 320px;
	height: 244px;
	margin: 0 auto;
}
.section3 .list-card .item {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 320px;
	opacity: 0;
}
.section4 {
	position: relative;
	padding: 80px 0;
	background-color: #fff;
}
.section4 .tit {
	margin: 0 auto 50px;
}
.section4 .link-share {
	position: relative;
	z-index: 30;
	display:block;
	width: 319px;
	height: 72px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	border-radius: 10px;
	border: solid 3px #222222;
	background-color: #fff59b;
	text-align: center;
	box-sizing: border-box;
	box-shadow: 5px 5px 0 #000;
}
.section4 .link-share .txt {
	display: inline-block;
}
.section4.active .finished {
	display: none;
}
.section4 .finished {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 30;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.9);
}
.section4 .finished .desc {
	position: absolute;
	top: 240px;
	left: 50%;
	width: 216px;
	height: 240px;
	margin-left: -108px;
	background: url(https://og.kakaobank.io/view/8ec77c04-b6c8-440c-ae98-5e9990c11847) no-repeat 0 0 ;
	background-size: 216px 240px;
}
.section5 {
	padding: 60px 0 80px;
	background-color: #72d7ac;
	border-top: 3px solid #000;
}
.section5 .tit {
	margin: 0 auto 40px;
}
.section5 .list {
	margin: 0 auto 80px;
}
.section5 .sns-share {
	position: relative;
	z-index: 30;
	text-align: center;
}
.section5 .link-share {
	display: inline-block;
	margin-left: 20px;
}
.section5 .link-share:first-child {
	margin-left: 0;
}

.kabang-footer {
	padding: 0 0 130px;
	background: #6ccca3;
}
.kabang-footer .inner {
	position: relative;
	z-index: 10;
	max-width: 375px;
	margin: 0 auto;
	padding: 0 25px;
}
.kabang-footer .link-info {
	display: block;
	position: relative;
	z-index: 30;
	padding: 28px 0;
	border-bottom: 3px solid #fff;
}
.kabang-footer .link-info .ico-more {
	transition: transform 0.3s;
	-webkit-transition: -webkit-transform 0.3s;
}
.kabang-footer .link-info.active .ico-more {
	transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
}

.kabang-footer .ico-more {
	position: absolute;
	top: 28px;
	right: 5px;
}
.kabang-footer .desc-serial {
	margin-top: 28px;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.57;
	color: #ffffff;
}
.kabang-footer .list-info {
	display: none;
	padding: 20px 0 28px 0;
	font-size: 14px;
	line-height: 1.57;
	color: #ffffff;
	border-bottom: 3px solid #fff;
}
.kabang-footer .list-info .tit {
	display: block;
	margin: 20px 0 5px 0;
	font-weight: bold;
}
.kabang-footer .list-info .item {
	position: relative;
	padding-left: 10px;
}
.kabang-footer .list-info .item:before {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	left: 0;
	width: 2px;
	height: 2px;
	background-color: #fff;
}
.kabang-footer .list-info .tel {
	color: #fff;
}
.kabang-footer .link-mini {
	display: block;
	position: fixed;
	bottom: -78px;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 78px;
	padding: 25px 0 0;
	box-sizing: border-box;
	background-color: #ffe100;
	transition: bottom 0.3s;
	-webkit-transition: bottom 0.3s;
}
.kabang-footer .link-mini .txt {
	margin: 0 auto;
}
.kabang-footer .link-mini.active {
	bottom: 0;
	/*transform: translateY(-78px);*/
	/*-webkit-transform: translateY(-78px);*/
}

.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
}
.popup .popup-inner {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 320px;
	padding: 36px 0 15px;
	box-sizing: border-box;
	border-radius: 8px;
	background-color: #fff;
	border: solid 3px #000000;
}
.popup .desc {
	margin: 0 auto 26px;
}
.popup .btn-confirm {
	display: block;
	width: 284px;
	height: 60px;
	margin: 0 auto;
	padding-top: 8px;
	vertical-align: top;
	box-sizing: border-box;
	border-radius: 6px;
	background-color: #30d691;
}
.popup .btn-confirm .txt {
	display: inline-block;
}
.popup .btn-close {
	position: absolute;
	top: 8px;
	right: 8px;
}
.popup-type2 .popup-inner {
	overflow: hidden;
	width: 300px;
	margin: -85px 0 0 -150px;
	padding: 0;
	border-radius: 3px;
	background-color: #fff;
	border: 0 none;
}
.popup-type2 .desc {
	margin: 0;
	padding: 36px;
	font-size: 17px;
	line-height: 1.35;
	text-align: center;
	color: #000000;
}
.popup-type2 .btn-confirm {
	display: block;
	width: 100%;
	height: 54px;
	padding-top: 3px;
	vertical-align: top;
	box-sizing: border-box;
	border-radius: 0;
	background-color: #ffe400;
	font-size: 16px;
	line-height: 1.38;
	text-align: center;
	color: #000000;
}
#makeMiniPopup .popup-inner {
	width: 320px;
	margin-left: -160px;
}
#makeMiniPopup .desc {
	padding: 36px 0;
	font-size: 16px;
	line-height: 1.44;
	text-align: center;
	color: #000000;
}
#makeMiniPopup .btns {
	overflow: hidden;
	width: 100%;
}
#makeMiniPopup .btn-cancel {
	float: left;
	width: 127px;
	height: 54px;
	padding-top: 18px;
	box-sizing: border-box;
	background-color: #ddd;
	text-align: center;
	font-size: 16px;
	line-height: 1.44;
	color: #000000;
}
#makeMiniPopup .btn-confirm {
	float: left;
	width: 193px;
	padding-top: 18px;
	box-sizing: border-box;
	text-align: center;
	line-height: 1.44;
}
#kabangAppPopup .popup-inner {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 396px;
	margin: -123px 0 0 -198px;
	padding: 40px 0 15px;
	box-sizing: border-box;
	border-radius: 8px;
	background-color: #fff;
	border: solid 3px #000000;
}
#kabangAppPopup .desc {
	width: 288px;
	height: 72px;
	margin-bottom: 32px;
	background: url(https://og.kakaobank.io/view/57a79e74-4e14-4306-b1bd-1a5832fec339) no-repeat 0 0;
	background-size: 288px 72px;
}
#kabangAppPopup .btn-confirm {
	width: 360px;
	height: 72px;
}
#sentEmoticonPopup .popup-inner,
#alreadyPopup .popup-inner {
	margin: -102px 0 0 -160px;
}
#finishedEventPopup .popup-inner {
	margin: -87px 0 0 -160px;
}
#emoticonPopup .popup-inner {
	margin: -266px 0 0 -160px;
}
#emoticonPopup .num-phone {
	display:block;
	padding: 0 0 24px 0;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.15;
	text-align: center;
	color: #30d691;
}
#emoticonPopup .btn-agree {
	display: block;
	width: 283px;
	height: 60px;
	margin: 0 auto;
	border-radius: 6px;
	background-color: #30d691;
	text-align: left;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.47;
	color: #ffffff;
}
#emoticonPopup .btn-agree .check {
	float: left;
	width: 28px;
	height: 28px;
	margin: 0 0 0 16px;
	background: url(https://og.kakaobank.io/view/72cbfc99-435b-46b2-89e1-9725f13cb60d)  0 0 no-repeat;
	background-size: 28px 28px;
}
#emoticonPopup .btn-agree .txt {
	float: left;
	margin: 4px 0 0 10px;
}
#emoticonPopup .btn-agree.active {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.47;
	color: #000000;
	background-color: #f7f7f7;
}
#emoticonPopup .btn-agree.active .check {
	background-image: url(https://og.kakaobank.io/view/2f8a2b9f-1875-431c-8790-3938c02013e4);
}
#emoticonPopup .list-agree {
	padding: 24px 20px;
	font-size: 12px;
	line-height: 1.58;
	color: #666666;
}
#emoticonPopup .list-agree .item {
	position: relative;
	padding: 0 0 0 15px;
}
#emoticonPopup .list-agree .item:before {
	content: '';
	position: absolute;
	top: 10px;
	left: 5px;
	width: 2px;
	height: 2px;
	border-radius: 2px;
	background-color: #626262;
}
#emoticonPopup .list-agree strong {
	font-size: 14px;
	font-weight: bold;
}

#emoticonPopup .btn-emoticon {
	display: block;
	width: 280px;
	height: 60px;
	margin: 0 auto;
	padding: 15px 0 0 0;
	box-sizing: border-box;
	border-radius: 6px;
	background-color: #c6c6c6;
}
#emoticonPopup .btn-emoticon .txt {
	margin: 0 auto;
}
#emoticonPopup a.btn-emoticon {
	background-color: #30d691;
}

/* sprite image */
.sprite-img-4-01 {
	background-image: url(https://og.kakaobank.io/view/85d7e14b-9a1d-4bb0-90b4-5337489fe24e);
	background-position: 0px 0px;
	width: 320px;
	height: 240px;
}
.sprite-img-4-02 {
	background-image: url(https://og.kakaobank.io/view/85d7e14b-9a1d-4bb0-90b4-5337489fe24e);
	background-position: -322px 0px;
	width: 320px;
	height: 240px;
}
.sprite-img-4-03 {
	background-image: url(https://og.kakaobank.io/view/85d7e14b-9a1d-4bb0-90b4-5337489fe24e);
	background-position: 0px -242px;
	width: 320px;
	height: 240px;
}
.sprite-img-4-04 {
	background-image: url(https://og.kakaobank.io/view/85d7e14b-9a1d-4bb0-90b4-5337489fe24e);
	background-position: -322px -242px;
	width: 320px;
	height: 240px;
}
.sprite-img-4-05 {
	background-image: url(https://og.kakaobank.io/view/85d7e14b-9a1d-4bb0-90b4-5337489fe24e);
	background-position: -644px 0px;
	width: 320px;
	height: 240px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
	.sprite-img-4-01 {
		background-image: url(https://og.kakaobank.io/view/afb42768-74ef-4ddf-aa3a-9bed11a254f7);
		background-size: 964px 482px;
	}
	.sprite-img-4-02 {
		background-image: url(https://og.kakaobank.io/view/afb42768-74ef-4ddf-aa3a-9bed11a254f7);
		background-size: 964px 482px;
	}
	.sprite-img-4-03 {
		background-image: url(https://og.kakaobank.io/view/afb42768-74ef-4ddf-aa3a-9bed11a254f7);
		background-size: 964px 482px;
	}
	.sprite-img-4-04 {
		background-image: url(https://og.kakaobank.io/view/afb42768-74ef-4ddf-aa3a-9bed11a254f7);
		background-size: 964px 482px;
	}
	.sprite-img-4-05 {
		background-image: url(https://og.kakaobank.io/view/afb42768-74ef-4ddf-aa3a-9bed11a254f7);
		background-size: 964px 482px;
	}
}

/* sprite svg */
.sprite-ico-120-share-01 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 98.90377588306943% 47.953216374269005% no-repeat;
	width: 64px;
	height: 64px;
}

.sprite-ico-120-share-02 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 97.44214372716199% 63.74269005847953% no-repeat;
	width: 64px;
	height: 64px;
}

.sprite-ico-120-share-03 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 67.72228989037758% 81.28654970760233% no-repeat;
	width: 64px;
	height: 64px;
}

.sprite-img-01-title {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 0 100% no-repeat;
	width: 272px;
	height: 312px;
}

.sprite-img-02 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 45.257903494176375% 95.6140350877193% no-repeat;
	width: 284px;
	height: 292px;
}

.sprite-img-03 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 89.97395833333333% 69.44444444444444% no-repeat;
	width: 117px;
	height: 28px;
}

.sprite-img-04 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 47.25457570715474% 0 no-repeat;
	width: 284px;
	height: 336px;
}

.sprite-img-05 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 0 0 no-repeat;
	width: 284px;
	height: 436px;
}

.sprite-img-06 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 40.51355206847361% 55.55555555555556% no-repeat;
	width: 184px;
	height: 28px;
}

.sprite-img-07 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 85.86545729402873% 54.97896213183731% no-repeat;
	width: 223.5px;
	height: 35px;
}

.sprite-img-08 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 100% 0 no-repeat;
	width: 317px;
	height: 268px;
}

.sprite-img-09 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 74.13333333333334% 69.44444444444444% no-repeat;
	width: 135px;
	height: 28px;
}

.sprite-img-10 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 99.06651108518086% 40.833333333333336% no-repeat;
	width: 28px;
	height: 28px;
}

.sprite-img-11-btn {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 90.66241021548284% 37.119113573407205% no-repeat;
	width: 258.5px;
	height: 26px;
}

.sprite-img-25-mo {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 73.89749702026222% 79.2022792022792% no-repeat;
	width: 46px;
	height: 46px;
}

.sprite-img-alert-text-00 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 88.61154446177846% 41.1764705882353% no-repeat;
	width: 244px;
	height: 34px;
}

.sprite-img-alert-text-01 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 88.61154446177846% 47.953216374269005% no-repeat;
	width: 244px;
	height: 64px;
}

.sprite-img-alert-text-02 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 44.30577223088923% 49.12280701754386% no-repeat;
	width: 244px;
	height: 64px;
}

.sprite-img-alert-text-03 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 86.73946957878316% 63.74269005847953% no-repeat;
	width: 244px;
	height: 64px;
}

.sprite-img-alert-text-04 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 95.75471698113208% 40.833333333333336% no-repeat;
	width: 37px;
	height: 28px;
}

.sprite-img-alert-text-05 {
	background: url("https://og.kakaobank.io/view/b9eca2b2-8f31-4c32-992a-c28dd2911038") 71.92755498059509% 73.33333333333333% no-repeat;
	width: 112px;
	height: 28px;
}