@charset "UTF-8";
/*-------------------------------------------------
title       : 설정
Author      : 플랜아이 광주
Create date : 2022-06-07
-------------------------------------------------*/
/* search ========================================================
  단일 스타일 : 버튼 , 버튼정렬 , 텝메뉴 , 페이징 , 아이콘 ,
  다중 스타일 : 타이틀, 박스, 테이블 , 리스트 , 체크박스 , 라디오 , 토글 
================================================================= */
/* --------------------------------------------- 
 type     : 타이틀
 class    : title
---------------------------------------------*/
.title1 { display: block; font-size: 10px; }

.title2 { display: block; font-size: 10px; }

.title3 { display: block; font-size: 10px; }

.title4 { display: block; font-size: 10px; }

.title5 { display: block; font-size: 10px; }

.title6 { display: block; font-size: 10px; }

/* --------------------------------------------- 
 type     : 박스 
 class    : bucket
---------------------------------------------*/
.bucket { display: block; width: 100%; overflow: hidden; }

.bucket.style1 { border: 1px solid #000; background-color: #ccc; border-radius: 1rem; padding: 2rem; }

.bucket.style2 { border: 1px solid #ddd; }

.bucket.style2 .bk-head { padding: 3rem 5rem; font-weight: 500; border-bottom: 1px solid #ddd; }

.bucket.style2 .bk-body { padding: 4rem 5rem; background-color: #F4F4F4; font-size: 1.5rem; border-bottom: 1px solid #ddd; }

.bucket.style2 .bk-body dl { margin-bottom: 2rem; }

.bucket.style2 .bk-foot { padding: 4rem 3rem; text-align: center; font-weight: 500; }

.bucket.style2 .bk-foot p { margin-bottom: 1.2rem; }

.bucket.style2 .bk-foot form { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.bucket.style2 .bk-foot form span { height: 4.5rem; width: 14rem; border: 1px solid #BEBEBE; background-color: #F4F4F4; line-height: 4.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 2rem; }

.bucket.style2 .bk-foot form label { display: none; }

.bucket.style2 .bk-foot form input { padding: 0 1.5rem; height: 4.5rem; width: 14rem; display: block; border: 1px solid #BEBEBE; }

.bucket.style2 .bk-foot a.btn { border-radius: 5px; max-width: 32rem; height: 5.5rem; line-height: 5.5rem; font-weight: 500; }

/* --------------------------------------------- 
 type     : 박스 
 class    : bucket
---------------------------------------------*/
.tip-box { display: block; width: 100%; background-color: #FAFAFA; border-radius: 1rem; padding: 2.2rem 4rem; font-size: 1.7rem; color: #676767; }

.tip-box i { margin-right: 1rem; }

/* --------------------------------------------- 
 type     : 검색폼 
 class    : search-form
---------------------------------------------*/
.search-form { background-color: #F1F1F1; height: 10rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 0 2rem; }

.search-form form { width: 100%; max-width: 66rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 4rem; }

.search-form form label { display: none; }

.search-form form input { display: block; height: 100%; width: 100%; max-width: 44rem; background-color: #fff; border: none; margin: 0 1rem; padding: 0 1.5rem; }

.search-form form select { padding: 1rem; width: 100%; max-width: 14rem; border: none; background: url(../img/layout/select_down_btn.png) no-repeat calc(100% - 1rem) center #fff; }

.search-form form button { display: block; background-color: #333; color: #fff; max-width: 6rem; width: 100%; height: 100%; }

/* --------------------------------------------- 
 type     : 버튼 
 class    : btn
            -> size   : sm / md / lg / xl / block / auto
            -> style  : basic / line / colorName
---------------------------------------------*/
.btn { font-size: 1.6rem; border: 1px solid transparent; letter-spacing: -0.05em; -webkit-transition: 0.2s; transition: 0.2s; width: 100%; overflow: hidden; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn:active, .btn:visited { border: none; }

.btn.sm { max-width: 5rem; height: 5rem; line-height: 5rem; }

.btn.md { max-width: 8rem; height: 5rem; line-height: 5rem; }

.btn.lg { max-width: 14rem; height: 5rem; line-height: 5rem; }

.btn.xl { max-width: 15rem; height: 5rem; line-height: 5rem; }

.btn.block { max-width: 100%; height: 5rem; line-height: 5rem; }

.btn.auto { padding: 9px 15px; width: auto; }

.btn.basic { background-color: #e3e8f3; border-color: #e3e8f3; color: #7887a4; }

.btn.basic:hover { background-color: #e3e8f3; border-color: #e3e8f3; color: #7887a4; }

.btn.line { background-color: #fff; border-color: #ddd; color: #555; }

.btn.line:hover, .btn.line:focus { background-color: #FC524E; border-color: #FC524E; color: #fff; -webkit-box-shadow: 0rem 0rem 2rem rgba(0, 0, 0, 0.15); box-shadow: 0rem 0rem 2rem rgba(0, 0, 0, 0.15); }

.btn.red { background-color: #FC524E; border-color: #FC524E; color: #ffffff; }

.btn.red:hover, .btn.red:focus { background-color: #FC524E; border-color: #FC524E; color: #ffffff; }

.btn.gray { background-color: #e3e8f3; border-color: #e3e8f3; color: #7887a4; }

.btn.gray:hover, .btn.gray:focus { background-color: #e3e8f3; border-color: #e3e8f3; color: #7887a4; }

.btn.black { background-color: #36312D; border-color: #36312D; color: #fff; }

.btn.black:hover, .btn.black:focus { background-color: #000; border-color: #000; color: #fff; }

.btn.icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 1.5rem; }

/* --------------------------------------------- 
 type     : 버튼정렬 
 class    : btn-align
            -> left / right / center (정렬 방향)
---------------------------------------------*/
.btn-align { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin: 15px 0; }

.btn-align.left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.btn-align.left .btn:not(:last-child) { margin-right: 10px; }

.btn-align.center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.btn-align.center .btn:not(:last-child) { margin-right: 10px; }

.btn-align.right { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; }

.btn-align.right .btn:not(:last-child) { margin-right: 10px; }

/* --------------------------------------------- 
 type     : 리스트 
 class    : list
            -> li.none (볼렛 제거)
---------------------------------------------*/
.list { display: block; letter-spacing: -0.05em; line-height: 160%; }

.list > li.none::before { display: none; }

.list.style1 > li { position: relative; padding-left: 10px; color: #333; }

.list.style1 > li::before { content: ''; display: block; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background-color: #154194; }

.list.style1 > li > ul > li { position: relative; padding-left: 15px; color: #555; }

.list.style1 > li > ul > li::before { content: ''; display: block; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background-color: #464646; }

.list.style1 > li > ul > li.none::before { display: none; }

/* --------------------------------------------- 
 type     : 페이징 
 class    : paging
            -> li.active (선택된 객체)
            -> li.disable (비활성화)
---------------------------------------------*/
.paging { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin: 6.25rem 0; }

.paging li:not(:first-child) { margin-left: 5px; }

.paging li a { font-size: 1.5rem; display: block; width: 4rem; height: 4rem; border-radius: 50%; color: #666; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.paging li a:hover, .paging li a:focus, .paging li.active a { font-weight: 700; background-color: #333333; color: #fff; }

.paging li a:hover i, .paging li a:focus i, .paging li.active a i { background-position-y: -118px; }

.paging li.paging-btn a { border: 1px solid #ddd; }

.paging li.paging-btn.disable a, .paging li.paging-btn.disable a:hover, .paging li.paging-btn.disable a:focus { background: transparent; font-weight: normal; }

.paging li.paging-btn.disable a i, .paging li.paging-btn.disable a:hover i, .paging li.paging-btn.disable a:focus i { background-position-y: -136px !important; }

/* --------------------------------------------- 
 type     : 체크박스 
 class    : checkbox
            -> icon
            -> text
---------------------------------------------*/
.checkbox { cursor: pointer; vertical-align: middle; }

.checkbox input { display: none; }

.checkbox .text { cursor: pointer; color: #333333; font-weight: 500; }

.checkbox .icon { position: relative; display: inline-block; vertical-align: middle; }

.checkbox.style1 { position: relative; }

.checkbox.style1 .icon { width: 20px; height: 20px; margin: 0 0.5rem 0.2rem 0; background-color: #EDEDED; border-radius: 50%; }

.checkbox.style1 .icon::before, .checkbox.style1 .icon::after { content: ''; display: inline-block; background-color: #fff; width: 2px; position: absolute; -webkit-transform-origin: left top; transform-origin: left top; border-radius: 5px; }

.checkbox.style1 .icon::before { top: 9px; left: 4px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.checkbox.style1 .icon::after { top: 13px; left: 9px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

.checkbox.style1 input { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; }

.checkbox.style1 input + div .check-focus { display: none; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; width: 100%; height: 100%; outline: 1px solid #000; border: 1px solid #000; border-radius: 5px; padding: 10px; -webkit-box-sizing: content-box; box-sizing: content-box; }

.checkbox.style1 input:focus + div .check-focus { display: block; }

.checkbox.style1 input:active + div .check-focus { display: none; }

.checkbox.style1 input:checked + div .icon { background-color: #FC524E; }

.checkbox.style1 input:checked + div .icon + .text { color: #FC524E; }

.checkbox.style1 input:checked + div .icon::before { -webkit-transition: all .15s ease; transition: all .15s ease; height: 6px; }

.checkbox.style1 input:checked + div .icon::after { -webkit-transition: all .1s ease .15s; transition: all .1s ease .15s; height: 9px; }

.checkbox.style1 input:checked ~ .icon { background-color: #FC524E; }

.checkbox.style1 input:checked ~ .icon + .text { color: #FC524E; }

.checkbox.style1 input:checked ~ .icon::before { -webkit-transition: all .15s ease; transition: all .15s ease; height: 7px; }

.checkbox.style1 input:checked ~ .icon::after { -webkit-transition: all .1s ease .15s; transition: all .1s ease .15s; height: 9px; }

/* --------------------------------------------- 
 type     : 라디오 
 class    : radio
            -> icon
            -> text
---------------------------------------------*/
.radio { cursor: pointer; vertical-align: middle; }

.radio input { display: none; }

.radio .text { font-size: 1rem; color: #333333; font-weight: 500; }

.radio .icon { position: relative; display: inline-block; margin-right: 5px; vertical-align: middle; }

.radio.style1 { height: 24px; line-height: 24px; }

.radio.style1 .icon { width: 24px; height: 24px; background-color: #f5f5f5; border-radius: 50%; border: 1px solid #c5c5c5; }

.radio.style1 .icon::before, .radio.style1 .icon::after { content: ''; display: inline-block; background-color: #fff; width: 4px; position: absolute; -webkit-transform-origin: left top; transform-origin: left top; }

.radio.style1 .icon::before { top: 11px; left: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.radio.style1 .icon::after { top: 18px; left: 10px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

.radio.style1 input:checked ~ .icon { background-color: #6f204f; border-color: #5f5f5f; }

.radio.style1 input:checked ~ .icon::before { height: 8px; }

.radio.style1 input:checked ~ .icon::after { height: 14px; }

/* --------------------------------------------- 
 type     : 토글 
 class    : toggle
            -> icon
---------------------------------------------*/
.toggle { cursor: pointer; position: relative; display: inline-block; }

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle.style1 { width: 55px; height: 30px; }

.toggle.style1 .icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; background-color: #8b8b8b; -webkit-box-shadow: inset 1px 2px 1px #5f5f5f; box-shadow: inset 1px 2px 1px #5f5f5f; -webkit-transition: .4s; transition: .4s; }

.toggle.style1 .icon::before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 20px; }

.toggle.style1 input:checked + .icon { background-color: #154194; -webkit-box-shadow: inset 1px 2px 1px #0e2d68; box-shadow: inset 1px 2px 1px #0e2d68; }

.toggle.style1 input:checked + .icon::before { -webkit-transform: translateX(26px); transform: translateX(26px); }

/* --------------------------------------------- 
 type     : 탭메뉴
 class    : tab-menu
            -> li.active (활성화)
---------------------------------------------*/
.tab-menu { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin: 0 auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.tab-menu > li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.tab-menu > li > a { display: block; border: 1px solid #ddd; border-right: none; text-align: center; background-color: #fff; text-align: center; line-height: 6rem; height: 6rem; width: 100%; font-size: 1.7rem; font-weight: 500; }

.tab-menu > li > a:last-child { border-right: 1px solid #ddd; }

.tab-menu > li.active a, .tab-menu > li:hover a { background-color: #36312D; color: #fff; position: relative; }

.tab-menu > li.active a::before, .tab-menu > li:hover a::before { content: ''; display: block; position: absolute; bottom: -0.5rem; left: 50%; -webkit-transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); width: 2.5rem; height: 2.5rem; background-color: #36312D; }

/* --------------------------------------------- 
 type     : 테이블
 class    : table
            -> wide / higt
---------------------------------------------*/
.table { width: 100%; border-collapse: collapse; text-align: center; }

.table.style1 { border-radius: 5px; overflow: hidden; }

.table.style1 tr th { background-color: var(--table-bg-th); color: var(--table-ft-th); }

.table.style1 tr td { background-color: var(--table-bg-td); color: var(--table-ft-td); border: 1px solid var(--table-bd); }

.table.style1 tr td:first-child { border-left: none; }

.table.style1 tr:last-child td { border-bottom: none; }

.table.high5 tr td, .table.high5 tr th { padding-top: 0.3125rem; padding-bottom: 0.3125rem; }

.table.high10 tr td, .table.high10 tr th { padding-top: 0.625rem; padding-bottom: 0.625rem; }

.table.high15 tr td, .table.high15 tr th { padding-top: 0.9375rem; padding-bottom: 0.9375rem; }

.table.high20 tr td, .table.high20 tr th { padding-top: 1.25rem; padding-bottom: 1.25rem; }

.table.wide5 tr td, .table.wide5 tr th { padding-left: 0.3125rem; padding-right: 0.3125rem; }

.table.wide10 tr td, .table.wide10 tr th { padding-left: 0.625rem; padding-right: 0.625rem; }

.table.wide15 tr td, .table.wide15 tr th { padding-left: 0.9375rem; padding-right: 0.9375rem; }

.table.wide20 tr td, .table.wide20 tr th { padding-left: 1.25rem; padding-right: 1.25rem; }

/* table-align */
.table.left tr th, .table.left tr td { text-align: left; }

.table.right tr th, .table.right tr td { text-align: right; }

.table.center tr th, .table.center tr td { text-align: center; }

.table.td-right1 tr td:nth-of-type(1), .table.th-right1 tr th:nth-of-type(1) { text-align: right; }

.table.td-right2 tr td:nth-of-type(2), .table.th-right2 tr th:nth-of-type(2) { text-align: right; }

.table.td-right3 tr td:nth-of-type(3), .table.th-right3 tr th:nth-of-type(3) { text-align: right; }

.table.td-right4 tr td:nth-of-type(4), .table.th-right4 tr th:nth-of-type(4) { text-align: right; }

.table.td-right5 tr td:nth-of-type(5), .table.th-right5 tr th:nth-of-type(5) { text-align: right; }

.table.td-right6 tr td:nth-of-type(6), .table.th-right6 tr th:nth-of-type(6) { text-align: right; }

.table.td-right7 tr td:nth-of-type(7), .table.th-right7 tr th:nth-of-type(7) { text-align: right; }

.table.td-right8 tr td:nth-of-type(8), .table.th-right8 tr th:nth-of-type(8) { text-align: right; }

.table.td-right9 tr td:nth-of-type(9), .table.th-right9 tr th:nth-of-type(9) { text-align: right; }

.table.td-left1 tr td:nth-of-type(1), .table.th-left1 tr th:nth-of-type(1) { text-align: left; }

.table.td-left2 tr td:nth-of-type(2), .table.th-left2 tr th:nth-of-type(2) { text-align: left; }

.table.td-left3 tr td:nth-of-type(3), .table.th-left3 tr th:nth-of-type(3) { text-align: left; }

.table.td-left4 tr td:nth-of-type(4), .table.th-left4 tr th:nth-of-type(4) { text-align: left; }

.table.td-left5 tr td:nth-of-type(5), .table.th-left5 tr th:nth-of-type(5) { text-align: left; }

.table.td-left6 tr td:nth-of-type(6), .table.th-left6 tr th:nth-of-type(6) { text-align: left; }

.table.td-left7 tr td:nth-of-type(7), .table.th-left7 tr th:nth-of-type(7) { text-align: left; }

.table.td-left8 tr td:nth-of-type(8), .table.th-left8 tr th:nth-of-type(8) { text-align: left; }

.table.td-left9 tr td:nth-of-type(9), .table.th-left9 tr th:nth-of-type(9) { text-align: left; }

.table.td-center1 tr td:nth-of-type(1), .table.th-center1 tr th:nth-of-type(1) { text-align: center; }

.table.td-center2 tr td:nth-of-type(2), .table.th-center2 tr th:nth-of-type(2) { text-align: center; }

.table.td-center3 tr td:nth-of-type(3), .table.th-center3 tr th:nth-of-type(3) { text-align: center; }

.table.td-center4 tr td:nth-of-type(4), .table.th-center4 tr th:nth-of-type(4) { text-align: center; }

.table.td-center5 tr td:nth-of-type(5), .table.th-center5 tr th:nth-of-type(5) { text-align: center; }

.table.td-center6 tr td:nth-of-type(6), .table.th-center6 tr th:nth-of-type(6) { text-align: center; }

.table.td-center7 tr td:nth-of-type(7), .table.th-center7 tr th:nth-of-type(7) { text-align: center; }

.table.td-center8 tr td:nth-of-type(8), .table.th-center8 tr th:nth-of-type(8) { text-align: center; }

.table.td-center9 tr td:nth-of-type(9), .table.th-center9 tr th:nth-of-type(9) { text-align: center; }

/* table-reactive */
.table-reactive { overflow-x: auto; }

.table-reactive .table { min-width: 500px; }

/* table-scroll */
.table-scroll { overflow-x: auto; }

.table-scroll .table-thead { border-radius: 15px; overflow: hidden; padding-right: 15px; min-width: 600px; background-color: var(--table-bg-th); }

.table-scroll .table-thead .table tr th { color: var(--table-ft-th); }

.table-scroll .table-tbody { border-bottom: 1px solid var(--table-bd); min-width: 600px; overflow-y: auto; }

.table-scroll .table-tbody .table tr:last-child td { border-bottom: none; }

.table-scroll .table-tbody .table tr td { background-color: var(--table-bg-td); color: var(--table-ft-td); border-right: 1px solid var(--table-bd); border-bottom: 1px solid var(--table-bd); }

.table-scroll .table-tbody .table tr td:last-child { border-right: none; }

.table-scroll .table-tbody .table tr:hover td { background-color: #eee; }

/* scroll-style */
.table-scroll .table-tbody::-webkit-scrollbar { width: 15px; }

.table-scroll .table-tbody::-webkit-scrollbar-thumb { background-color: #bebebe; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; }

.table-scroll .table-tbody::-webkit-scrollbar-track { background-color: #d8d8d8; border-radius: 10px; overflow: hidden; }

/* scroll-height */
.table-scroll .table-tbody.mh280 { height: 280px; }

.table-scroll .table-tbody.mh375 { height: 375px; }

.table-scroll .table-tbody.mh420 { height: 420px; }

/* ICON */
i[class*="ci-"] { background-image: url(../../main/img/layout/icon_pack.png); text-decoration: none; display: inline-block; background-repeat: no-repeat; vertical-align: middle; cursor: pointer; }

i[class*="ci-"].ci-logo { width: 38px; height: 28px; background-position: -214px -166px; }

i[class*="ci-"].ci-naver { width: 15px; height: 25px; background-position: -0px 0px; }

i[class*="ci-"].ci-blog { width: 15px; height: 20px; background-position: -15px -0px; }

i[class*="ci-"].ci-facebook { width: 11px; height: 23px; background-position: -30px -0px; }

i[class*="ci-"].ci-instar { width: 18px; height: 19px; background-position: -42px -0px; }

i[class*="ci-"].ci-youtube { width: 19px; height: 13px; background-position: -61px -0px; }

i[class*="ci-"].ci-kakao { width: 20px; height: 21px; background-position: -80px -0px; }

i[class*="ci-"].ci-egov { width: 44px; height: 15px; background-position: -100px -0px; }

i[class*="ci-"].ci-sns { width: 42px; height: 42px; background-position-y: -50px; }

i[class*="ci-"].ci-sns.facebook { background-position-x: -0px; }

i[class*="ci-"].ci-sns.youtube { background-position-x: -43px; }

i[class*="ci-"].ci-sns.blog { background-position-x: -86px; }

i[class*="ci-"].ci-sns.naver { background-position-x: -129px; }

i[class*="ci-"].ci-sns.kakao { background-position-x: -172px; }

i[class*="ci-"].ci-sns.sm { width: 29px; height: 29px; background-position-y: -132px; }

i[class*="ci-"].ci-sns.sm.blog { background-position-x: -258px; }

i[class*="ci-"].ci-sns.sm.facebook { background-position-x: -288px; }

i[class*="ci-"].ci-sns.sm.kakao { background-position-x: -318px; }

i[class*="ci-"].ci-sns.sm.youtube { background-position-x: -348px; }

i[class*="ci-"].ci-paging { width: 18px; height: 18px; background-position-y: -100px; }

i[class*="ci-"].ci-paging.start { background-position-x: -118px; }

i[class*="ci-"].ci-paging.prev { background-position-x: -136px; }

i[class*="ci-"].ci-paging.next { background-position-x: -154px; }

i[class*="ci-"].ci-paging.end { background-position-x: -172px; }

i[class*="ci-"].ci-sub-book { width: 75px; height: 63px; background-position: -214px 0px; }

i[class*="ci-"].ci-sub-chat { width: 70px; height: 71px; background-position: -289px 0px; }

i[class*="ci-"].ci-sub-mail { width: 73px; height: 73px; background-position: -359px 0px; }

i[class*="ci-"].ci-license { width: 154px; height: 56px; background-position: -214px -73px; }

@-webkit-keyframes alram-ani { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  10% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
  20% { -webkit-transform: rotate(0); transform: rotate(0); }
  25% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
  50% { -webkit-transform: rotate(0); transform: rotate(0); }
  70% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
  80% { -webkit-transform: rotate(0); transform: rotate(0); }
  85% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
  100% { -webkit-transform: rotate(0); transform: rotate(0); } }

@keyframes alram-ani { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  10% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
  20% { -webkit-transform: rotate(0); transform: rotate(0); }
  25% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
  50% { -webkit-transform: rotate(0); transform: rotate(0); }
  70% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
  80% { -webkit-transform: rotate(0); transform: rotate(0); }
  85% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
  100% { -webkit-transform: rotate(0); transform: rotate(0); } }