.ratio-sms-wrap {max-width: 100%; position: relative;}
.ratio-sms {max-width: 100%; position:relative; margin: 0 auto; background: #fff;}
.ratio-sms nav {padding: 20px 40px 20px 40px; box-sizing: border-box; background:#036;}
.ratio-sms nav h1 span {color: #fff;font-size: 20px;  display:inline-block;}
.ratio-sms .ratio-sms-content {max-width: 100%;  position:relative; box-sizing:border-box;}
.ratio-sms .ratio-sms-content .ratio-sms-list {max-width: 100%; /*height: 100%;*/ display: block; padding: 43px; box-sizing:border-box; position:relative;}
/*타이틀*/
.ratio-sms-item-title {margin-bottom: 28px; margin-left: 16px;}
.ratio-sms-item-title h2 {font-size: 22px; color: #232323; font-weight:900; letter-spacing:-0.75px;}
.ratio-sms-item-title h2:before {width: 6px; height: 20px; display:inline-block; content:''; background:#0b56a4; margin-right: 8px; position: relative; top: 2px; }  
.ratio-sms-item-title h2 span{font-weight: 400; font-size: 20px;}
/*내용*/
.mb16 {margin-bottom: 16px;}
.mb24 {margin-bottom: 24px;}
.mb32 {margin-bottom: 32px;}
.mb40 {margin-bottom: 40px;}
.mb56 {margin-bottom: 56px;}
.ml16 {margin-left: 16px;}
.mr16 {margin-right: 16px;}
.mr32 {margin-right: 32px;}
.mt40 {margin-top: 40px;}
.bb_dot {border-bottom: 1px dotted #ccc; }
.ratio-sms-item {padding: 0px;}
.ratio-sms-item-article {padding: 0 16px;}
.ratio-sms-item-article h4 {font-size: 18px; color: #333; margin-bottom: 12px;}
.ratio-sms-item-article h4 span {color: #0b56a4; font-weight:900;font-size: 18px;}
.ratio-sms-item-article span {font-size: 16px; color: #222; line-height: 1.4;}
/*테이블 공통*/
.ratio-sms-item-article .br1 {border-right: 1px solid #ccc;}
.ratio-sms-item-article .bb1 {border-bottom: 1px solid #ccc;}
/*테이블01*/
.ratio-sms-item-article .item-table {margin-bottom: 20px;}
.ratio-sms-item-article .item-table:last-child {margin-bottom: 0px;}
.ratio-sms-item-article .item-table h6 {font-size: 16px; margin-left: 8px; color: #444;}
.ratio-sms-item-article .item-table h6:before {width: 4px; height: 14px; display:inline-block; content:''; background:#72a8ec; margin-right: 6px; position: relative; top: 2px;} 
.ratio-sms-item-article .item-table table{width:  calc(100% - 16px); margin: 12px auto  0px auto; border-top: 1px solid #999; border-bottom: 1px solid #999; text-align:center;}
.ratio-sms-item-article .item-table table th,.ratio-sms-item-article .item-table table td {padding: 12px 4px; font-size: 14px; color: #333; line-height: 1.3;}
.ratio-sms-item-article .item-table table th {background: #edf2fa; font-weight:700;}
/*테이블02*/
.ratio-sms-item-article .ex-table {margin-top: 12px;}
.ratio-sms-item-article .ex-table h6 {font-size: 12px; color: #333;}
.ratio-sms-item-article .ex-table table{width: 100%; margin: 8px auto 0px auto; border-top: 1px solid #999; border-bottom: 1px solid #999; text-align:center;}
.ratio-sms-item-article .ex-table table th {background: #f8f8f8; color: #444;}
.ratio-sms-item-article .ex-table table th, .ratio-sms-item-article .ex-table table td {line-height: 1; padding: 6px 0;letter-spacing: -1px;}
/*3페이지*/
.ratio-sms-item-article02 {padding: 0px 20px ; display: flex; align-items: flex-start;}
.ratio-sms-item-article02 .number p{font-size: 12px; background:#4d92d9; border-radius:5px; width: 16px; height:16px; line-height: 16px; color: #fff; font-weight: 700; text-align:center; margin-top: 2px;}
.ratio-sms-item-article02 .ratio-sms-text {font-size: 16px; padding-left: 4px; color: #222; line-height:1.2; letter-spacing:-0.5px;}
.ratio-sms-item-article02 .ratio-sms-text .sub-number {display: inline-block; font-size: 10px; background:#91b9eb; border-radius:5px; width: 16px; height: 16px; line-height: 16px; color: #fff; font-weight: 700; text-align:center;}
/*슬릭*/
.slick-arrow {position: absolute; top: 40%; z-index:100;}
.slick-arrow i {font-size: 24px;}
.slick-arrow.slick-next {right: 12px; }
.slick-arrow.slick-prev {left: 12px;}
.slick-dots {display: inline-block; width: 250px; position:absolute; left: 50%; margin-left: -80px; bottom: 28px;}
.slick-dots li{float: left;  display: block; width: 32px; height: 3px; background: #ccc; margin-left: 8px; cursor:pointer;}
.slick-dots li:first-child {margin-left: 0;}
.slick-dots li.slick-active{background: #666;}

/*알림톡 팝업 버튼*/
.talk-popup {background: rgba(61,27,27,1); color: #f8df00; height: 25px; padding: 0 12px; }

/*카톡*/
.katalk-page {background: #b2c7d9; }
.ratio-sms-item-article.katalk {padding: 0;}
.katalk {display: flex; justify-content: space-evenly;}
.katalk-item {width: 330px; border-radius: 5px; display: flex;  justify-content: space-between;} 
.katalk-item .profile-pt {width: 50px; height: 50px; background:url(../images/profile.png); border-radius: 40%;}
.katalk-item .katalk-cont {width: 270px; background: #fff; border-radius:5px; box-shadow: 0 0 5px 1px rgba(0,0,102,0.1);}
.katalk-item p {line-height: 2; color: #111; font-size: 12px;}
.katalk-item .katalk-cont .katalk-title {width: 100%; padding: 12px; background: #f8df00; box-sizing: border-box; font-size: 12px; color: #111; border-radius: 5px 5px 0 0;}
.katalk-item .katalk-cont .katalk-text {padding: 20px 14px; font-size: 14px; color: #222; line-height:1.5;}
.katalk-item .katalk-cont .katalk-btn {margin: 8px 0; width: 100%;background: #e9e9e9; padding: 12px 0; color: #444; border-radius:5px;}

/*카톡화면 애니메이션*/
.katalk-item:nth-child(1) {animation: fadein 0.1s 0.5s;  -webkit-animation: fadein 0.1s 0.5s; animation-fill-mode: forwards; opacity:0;}
@keyframes fadein { 
		from { opacity: 0; } 
		to { opacity: 1; } }
@-webkit-keyframes fadein {
		from { opacity: 0; } 
		to { opacity: 1; } }

.katalk-item:nth-child(2) {animation: fadein2 0.1s 1.8s; -webkit-animation: fadein2 0.1s 1.8s; animation-fill-mode: forwards; opacity:0;}
@keyframes fadein2 { 
		from { opacity: 0; }
		to { opacity: 1; } }
@-webkit-keyframes fadein2 {
		from { opacity: 0; } 
		to { opacity: 1; } }