@charset "utf-8";
/* 서브 타이틀 */
.sub-title { font-size: 17px; font-weight: 500; display: block; margin-bottom: 15px; line-height: 20px; }

/* 텍스트 인풋 */
.normal-txt-input { height: 30px; border: 1px solid #dcdcdc; line-height: 28px; padding: 0 10px; border-radius: 3px; }

/* 커스텀 체크 */
.custom-check { display: none; }
.custom-check-label { padding-left: 20px; width: 15px; height: 15px; position: relative; }
.custom-check-label:before { position: absolute; content: ''; width: 15px; height: 15px; left: 0; top: 50%; margin-top: -7px; background: url(../../img/team-master/check.png); background-size: 15px 30px; background-position: 0 0; }
.custom-check:checked + .custom-check-label:before { background-position: 0 -15px; }

/* 커스텀 라디오 */
.custom-radio { display: none; }
.custom-radio-label { padding-left: 20px; width: 15px; height: 15px; position: relative; }
.custom-radio-label:before { position: absolute; content: ''; width: 15px; height: 15px; left: 0; top: 50%; margin-top: -7px;  background: url(../../img/team-master/radio.png); background-size: 15px 30px; background-position: 0 0; }
.custom-radio:checked + .custom-radio-label:before { background-position: 0 -15px; }

/* 셀렉트 커스텀 */
.selectbox { position: relative; border-style: none;  z-index: 1; display: inline-block; border: 1px solid #e5e5e5; height: 30px; width: 100%; border-radius: 3px; vertical-align: middle; transition: background .25s ease; }
.selectbox:hover { background: #f8f8f8; }
.selectbox:before { content: "";  position: absolute; top: 50%; margin-top: -10px; right: 8px; background: url(../../img/team-page/down_b_ico.svg) no-repeat; width: 20px; height: 20px; opacity: 0.5; }
.selectbox label { position: absolute; top: 0; left: 0; color: #222;  z-index: -1;  /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */ font-size: 13px; line-height: 28px; text-align: left; width: 90%; padding-left: 10px; padding-right: 5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selectbox select { width: 100%; line-height: normal;  /* line-height 초기화 */ font-family: inherit; border: 0; opacity: 0;  /* 숨기기 */  filter:alpha(opacity=0);  /* IE8 숨기기 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */  -moz-appearance: none; appearance: none; margin-left: 0; height: 28px; cursor: pointer; }
.selectbox select option { font-size: 13px; }

/* 모달 */
.modal { position: fixed; z-index: 999; width: 450px; background: #fff; border-radius: 8px; box-shadow: 0 10px 15px -5px rgba(0,0,0,0.3); border: 1px solid #e5e5e5; left: 50%; margin-left: -225px; top: 200px; }
.modal .modal-head { padding: 10px 15px; overflow: hidden; border-bottom: 1px solid #eee; } 
.modal .modal-head .modal-ico {  text-align: center; float: left; }
.modal .modal-head .modal-ico img { width: 20px; margin-top: 8px; }
.modal .modal-head .modal-title { float: left; line-height: 33px; font-size: 16px; font-weight: bold; margin-left: 8px; color: #222; }
.modal .modal-head .close-btn { height: 35px; width: 35px; float: right; background: none; border: none; opacity: 0.2; }
.modal .modal-content { padding: 20px 15px; }
.modal .modal-content .question { font-weight: bold; font-size: 15px; }
.modal .modal-btn-wrap { padding: 10px 15px; border-top: 1px solid #e5e5e5; text-align: right; }

/* 레이어 */
.layer { position: fixed; z-index: 999; width: 1000px; background: #fff; border-radius: 8px; box-shadow: 0 10px 15px -5px rgba(0,0,0,0.3); border: 1px solid #e5e5e5; left: 50%; margin-left: -500px; top: 150px; }
.layer .close-btn { position: absolute; right: 15px; top: 15px; height: 35px; width: 35px; background: none; border: none; opacity: 0.2; }
.layer .layer-content { padding: 50px 15px 20px; }
.layer .layer-content .question { font-weight: bold; font-size: 15px; }
.layer .layer-btn-wrap { padding: 10px 15px; border-top: 1px solid #e5e5e5; text-align: right; }

/* 리스트 테이블 */
.table-btn-area { height: 30px; text-align: right; margin-bottom: 10px; }
.table-btn-area .notice { display: inline-block; float: left; color: #2932cb; font-size: 14px; letter-spacing: -0.5px; }

.list-table-wrap table { width: 100%; font-size: 12px; border-top: 2px solid #2932CB; }
.list-table-wrap table thead tr { border-bottom: 1px solid #dcdcdc; }
.list-table-wrap table thead tr th { border-right: 1px solid #eee; }
.list-table-wrap table thead tr th:last-child { border-right: none; }
.list-table-wrap table thead tr th { font-weight: bold; text-align: center; padding: 10px 5px; background: #f8f8f8; font-weight: 500; }
.list-table-wrap table tbody tr { border-bottom: 1px solid #e5e5e5; }
.list-table-wrap table tbody tr td { text-align: center; padding: 7px 5px; letter-spacing: 0; border-right: 1px solid #eee; font-weight: 300; }
.list-table-wrap table tbody tr td:last-child { border-right: none; }
.list-table-wrap table tbody tr td .del-btn { height: 25px; font-size: 11px; line-height: 23px; padding: 0 15px; }
.list-table-wrap table tbody tr td .normal-btn { height: 25px; font-size: 11px; line-height: 23px; padding: 0 15px; }
.list-table-wrap table tbody tr td a:hover { text-decoration: underline; }
.list-table-wrap table tbody tr td .profile { width: 40px; height: 40px; overflow: hidden; border-radius: 50%; display: inline-block; margin-top: 3px; }
.list-table-wrap table tbody tr td .profile img { width: 100%; height: 100%; }
.list-table-wrap table tbody tr td .board-title { display: inline-block; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.list-table-wrap table tbody tr td.blue-font { color: #2932cb; font-weight: bold; }
.list-table-wrap table tbody tr td.red-font { color: #ff0000; font-weight: bold; }
.list-table-wrap table tbody tr.light-bl-bg { background: #f1f2ff; }
.list-table-wrap table tbody tr.light-red-bg { background: #fff1f1; }

.list-table-wrap .table-filter-area { margin-bottom: 10px; }
.list-table-wrap .table-filter-area>div { display: inline-block; }
.list-table-wrap .table-filter-area>div.align { margin-right: 20px; }
.list-table-wrap .table-filter-area .head { font-weight: 500; margin-right: 10px; }
.list-table-wrap .table-filter-area .selectbox { width: 120px; margin-right: 5px; }
.list-table-wrap .table-filter-area .selectbox:last-child { margin-right: 0; }

/* 서치 테이블 */
.search-table { margin-bottom: 20px; }
.search-table table { width: 100%; font-size: 13px; }
.search-table table tr th { background: #2932CB; color: #fff; padding: 10px 12px; border-bottom: 1px solid #585FE1; width: 150px; }
.search-table table tr th:last-child { border-bottom: none; }
.search-table table tr td { border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding: 10px 12px;  letter-spacing: 0; }
.search-table table tr:first-of-type td { border-top: 1px solid #eee; }
.search-table table tr td label { margin-right: 10px; }
.search-table table tr td .selectbox { width: 180px; }

/* 셋팅 테이블 */
.set-table-wrap .set-table { margin-bottom: 20px; }
.set-table-wrap .set-table:last-child { margin-bottom: 0; }
.set-table-wrap .set-table .table-title { font-size: 17px; padding-bottom: 10px; border-bottom: 2px solid #555; font-weight: 500; position: relative; }
.set-table-wrap .set-table .exp { font-size: 13px; margin: 0 0 10px; display: block; background: #f8f8f8; padding: 10px 10px; }
.set-table-wrap .set-table .exp img { width: 17px; height: 17px; margin-top: 2px; margin-right: 5px; opacity: 0.6; }
.set-table-wrap .set-table .add-btn { position: absolute; right: 0; top: 0; }
.set-table-wrap .set-table .table-head-row { overflow: hidden; border-top: 1px solid #e5e5e5; height: 57px; border-bottom: 1px solid #e5e5e5; }
.set-table-wrap .set-table .table-head-row .th { width: 20%; float: left; font-size: 14px; font-weight: bold; padding: 16px 10px; background: #f2f2f7; height: 100%; border-right: 1px solid #e5e5e5; }
.set-table-wrap .set-table .table-head-row .td { width: 80%; float: right; padding: 10px; font-size: 14px; }
.set-table-wrap .set-table .table-head-row .td .txt { height: 100%; padding: 6px 0; }
.set-table-wrap .set-table .table-head-row .td .file-name { background: #f8f8f8; font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 0 12px; height: 35px; line-height: 33px; display: inline-block; border: 1px solid #e5e5e5; border-radius: 3px; cursor: default; }
.set-table-wrap .set-table .table-head-row .td .file-name .image-ico { width: 16px; margin-top: 9px; margin-right: 4px; opacity: 0.8; }
.set-table-wrap .set-table .table-head-row .td .reset-btn { background: none; border: none; width: 20px; height: 20px; margin-left: 8px; border-radius: 3px; transition: background .25s ease; }
.set-table-wrap .set-table .table-head-row .td .reset-btn:hover { background: #eee; }
.set-table-wrap .set-table .table-head-row .td .reset-btn img { width: 90%; opacity: 0.5; }
.set-table-wrap .set-table .table-content { overflow: hidden; }
.set-table-wrap .set-table .table-content .preview-box { float: left; height: 190px; overflow: hidden; text-align: center; position: relative; }
.set-table-wrap .set-table.info-disclosure-status .table-content .preview-box { width: 100%; height: auto; }
.set-table-wrap .set-table.logo .table-content .preview-box { width: 20%; }
.set-table-wrap .set-table.banner .table-content .preview-box { width: 50%; }
.set-table-wrap .set-table .table-content .preview-box img { width: 185px; }
.set-table-wrap .set-table.info-disclosure-status .table-content .preview-box img { width: 100%; height: auto; }
.set-table-wrap .set-table.banner .table-content .preview-box { height: auto; padding: 10px; background: #f8f8f8; }
.set-table-wrap .set-table.banner .table-content .preview-box img { width: 100%; }
.set-table-wrap .set-table .table-content .preview-box .label { background: rgba(0,0,0,.7); color: #fff; font-size: 12px; font-weight: 300; padding: 0 10px; display: inline-block; height: 23px; line-height: 23px; border-radius: 3px; position: absolute; z-index: 2; left: 10px; top: 10px; cursor: default; }
.set-table-wrap .set-table .table-content .info-box-wrap { float: right; padding: 10px; }
.set-table-wrap .set-table.logo .table-content .info-box-wrap { width: 80%; }
.set-table-wrap .set-table.banner .table-content .info-box-wrap { width: 50%; }
.set-table-wrap .set-table .table-content .info-box-wrap .info-box { padding: 15px; background: #f8f8f8; }
.set-table-wrap .set-table .table-content .info-box-wrap .info-box p { color: #555; font-weight: 500; margin-bottom: 3px; }
.set-table-wrap .set-table .table-content .info-box-wrap .info-box p:last-child { margin-bottom: 0; }
.set-table-wrap .set-table .table-content .info-box-wrap .info-box p img { width: 17px; height: 17px; margin-top: 2px; margin-right: 5px; opacity: 0.6; }

.set-table-wrap .set-table .table-content .input-area textarea { width: 100%; height: 150px; }
.set-table-wrap .set-table .table-content .input-area .btn-wrap { margin-top: 10px; overflow: hidden; text-align: right; }

.set-table-wrap .set-table .table-content .input-area .history-wrap .history { margin-bottom: 15px; }
.set-table-wrap .set-table .table-content .input-area .history-wrap .normal-txt-input { width: 100%; height: 35px; letter-spacing: 0; margin-bottom: 5px; }

.set-table-wrap .set-table.banner .table-head-row div.td .file-input { width: 220px; opacity: 0.4; pointer-events: none; cursor: not-allowed; }
.set-table-wrap .set-table.banner .table-head-row div.td label { margin-right: 15px; }
.set-table-wrap .set-table.banner .table-head-row div.td #banner_img_user:checked ~ .file-input { opacity: 1; pointer-events: all; cursor: pointer; }

.set-table-wrap .set-table .btn-wrap { margin-top: 10px; text-align: right; }

/* 페이징 */
.paging { margin-top: 20px; }
.paging ul { text-align: right; }
.paging ul li { display: inline-block; height: 30px; vertical-align: top; }
.paging ul li a { display: block; padding: 0 12px; font-size: 13px; height: 100%; line-height: 30px; }
.paging ul li.select a,
.paging ul li.select a:hover { background: #2932CB; color: #fff; }
.paging ul li a:hover { background: #f8f8f8; }
.paging ul li.prev-btn a,
.paging ul li.next-btn a { padding: 3px 4px; }
.paging ul li a img { opacity: 0.3; }
.paging ul li a:hover img { opacity: 0.7; }


/* 파일 인풋 */
.file-input { display: inline-block; text-align: left; width: 50%; position: relative; border-radius: 3px; padding: 8px 10px; padding-right: 80px; color: #999; font-size: 13px; line-height: normal; vertical-align: middle; background-color: #f5f5f5; cursor: pointer; border: 1px solid #dcdcdc; border: 1px solid #dcdcdc; border-radius: 2px; font-weight: bold; color: #8c8c8c; letter-spacing: -0.5px; height: 35px; border-top-right-radius: 0; border-bottom-right-radius: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-input > [type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 3; cursor: pointer; }
.file-input > .button { display: inline-block; padding: 8px 20px; color: #999; font-size: 12px; line-height: normal; vertical-align: top; background-color: #fdfdfd; cursor: pointer; border: 1px solid #dcdcdc; border-bottom-color: #e2e2e2; border-radius: 3px; color: #8c8c8c; letter-spacing: -0.5px; height: 35px; border-top-left-radius: 0; border-bottom-left-radius: 0; position: absolute; z-index: 2; top: -1px; right: -1px; transition: all 0.3s ease; }
.file-input:hover > .button { background: #2932CB; color: #fff; border-color: #2932CB; }
.file-input > .label { color: #222; white-space: nowrap; vertical-align: top; cursor: pointer; font-weight: normal; overflow: hidden; text-overflow: ellipsis; width: 100%; display: inline-block; }
.file-input.-chosen > .label { opacity: 1; }

/* 온오프 토글 */
.on-off-toggle { display: inline-block; height: 28px; width: 100px; position: absolute; top: 0; right: 0; }
.on-off-toggle label { display: block; height: 100%; overflow: hidden; }
.on-off-toggle label span { display: inline-block; height: 100%; float: left; width: 50%; font-size: 12px; text-align: center; line-height: 26px; border: 1px solid #e5e5e5; }
.on-off-toggle label span.on { border-right: none; border-top-left-radius: 3px; border-bottom-left-radius: 3px; background: #f8f8f8; color: #999; }
.on-off-toggle label span.off { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-color: #D50003; color: #fff; background: #D50003; }
#on_off_toggle:checked + label span.on { background: #00B514; color: #fff; border-color: #00B514; }
#on_off_toggle:checked + label span.off { background: #f8f8f8; color: #999; border-color: #e5e5e5; }

/* 템플릿 선택 */
.templete-select-wrap .templete-intro-box { overflow: hidden; margin-bottom: 25px; }
.templete-select-wrap .templete-intro-box:last-child { margin-bottom: 0; }
.templete-select-wrap .templete-intro-box .sample-img-area { float: left; width: 50%; }
.templete-select-wrap .templete-intro-box .sample-img-area img { width: 100%; }
.templete-select-wrap .templete-intro-box .intro-area { float: right; width: 50%; padding-left: 30px; min-height: 230px; position: relative; }
.templete-select-wrap .templete-intro-box .intro-area .temp-name { font-size: 18px; display: block; border-bottom: 2px solid #222; padding-bottom: 10px; }
.templete-select-wrap .templete-intro-box .intro-area .exp { font-size: 13px; margin: 0 0 10px; display: block; background: #f8f8f8; padding: 10px 10px; }
.templete-select-wrap .templete-intro-box .intro-area .exp img { width: 17px; height: 17px; margin-top: 2px; margin-right: 5px; opacity: 0.6; }
.templete-select-wrap .templete-intro-box .intro-area button { position: absolute; bottom: 0; right: 0; }
.templete-select-wrap .templete-intro-box .intro-area button.selected { cursor: not-allowed; }
.templete-select-wrap .templete-intro-box .intro-area .comment-box .head { overflow: hidden; margin-bottom: 5px; }
.templete-select-wrap .templete-intro-box .intro-area .comment-box .head .titie { float: left; font-weight: 500; }
.templete-select-wrap .templete-intro-box .intro-area .comment-box .head .notice { float: right; color: #FF0004; font-size: 11px; letter-spacing: 0; }
.templete-select-wrap .templete-intro-box .intro-area .comment-box textarea { width: 100%; height: 100px; margin-bottom: 50px; }

/* 상세 조회 */
.detail-table-wrap { overflow: hidden;  }
.detail-table-wrap .img-area { width: 25%; float: left; padding-right: 30px; }
.detail-table-wrap .img-area .img-box { text-align: center; }
.detail-table-wrap .img-area .img-box img { width: 100%; height: auto; }
.detail-table-wrap .img-area .img-box button { margin-top: 20px; }
.detail-table-wrap .table-area { width: 75%; float: right; padding-left: 20px; }
.detail-table-wrap .table-area table { width: 100%; font-size: 13px; border-top: 2px solid #2932CB; }
.detail-table-wrap .table-area table tbody tr { border-bottom: 1px solid #e5e5e5; }
.detail-table-wrap .table-area table tbody tr th { font-weight: 500; background: #f8f8f8; padding: 15px; width: 18%; }
.detail-table-wrap .table-area table tbody tr td { padding: 10px 15px; letter-spacing: 0; width: 32%; }
.detail-table-wrap .table-area table tbody tr td .normal-txt-input { width: 45px; }
.detail-table-wrap .table-area table tbody tr td .unit { color: #999; font-size: 12px; margin: 0 5px; }
.detail-table-wrap .table-area table tbody tr td label { margin-right: 10px; }
.detail-table-wrap .btn-wrap { float: left; width: 100%; margin-top: 20px; text-align: right; }

/* 게시판 테이블 */
.board-table-wrap .board-header-table { margin-bottom: 10px; }
.board-table-wrap .board-header-table table { width: 100%; font-weight: 13px; border-top: 2px solid #2932CB; }
.board-table-wrap .board-header-table table tbody tr { border-bottom: 1px solid #e5e5e5; }
.board-table-wrap .board-header-table table tbody tr th { font-weight: 400; background: #f8f8f8; padding: 15px; width: 18%; }
.board-table-wrap .board-header-table table tbody tr td { padding: 10px 15px; letter-spacing: 0; width: 32%; font-weight:400; }
.board-table-wrap .board-header-table table tbody tr td .file { font-size: 13px; line-height: 20px; margin-right: 15px; }
.board-table-wrap .board-header-table table tbody tr td .file:last-child { margin-right: 0; }
.board-table-wrap .board-header-table table tbody tr td .file:hover { text-decoration: underline; }
.board-table-wrap .board-header-table table tbody tr td .file-ico { width: 12px; margin-right: 5px; margin-top: 2px; height: 15.23px; }

.board-table-wrap .table-btn-area { margin-bottom: 10px; }
.board-table-wrap .detail-content-area { padding: 15px; letter-spacing: 0; font-size: 13px; background: #f8f8f8; font-weight: 300; }
.board-table-wrap .detail-content-area img { max-width: 100%; }
.board-table-wrap .reply-area { overflow: hidden; }
.board-table-wrap .reply-area .reply-edit .head { display: block; font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.board-table-wrap .reply-area .reply-edit .reply-input-area { overflow: hidden; }
.board-table-wrap .reply-area .reply-edit textarea { width: 89%; float: left; height: 150px; }
.board-table-wrap .reply-area .reply-edit button { float: right; }
.board-table-wrap .reply-area .reply-list { margin-top: 15px; }
.board-table-wrap .reply-area .reply-list .reply { border-top: 1px solid #e5e5e5; }
.board-table-wrap .reply-area .reply-list .reply:last-child { border-bottom: 1px solid #e5e5e5; }
.board-table-wrap .reply-area .reply-list .reply .head { padding: 15px 15px 5px; overflow: hidden; }
.board-table-wrap .reply-area .reply-list .reply .head .user-name { float: left; font-size: 13px; font-weight: 600; }
.board-table-wrap .reply-area .reply-list .reply .head .date { letter-spacing: 0; color: #999; font-size: 12px; font-weight: 300; margin-left: 10px; float: left; }
.board-table-wrap .reply-area .reply-list .reply .head .btn-wrap { float: right; }
.board-table-wrap .reply-area .reply-list .reply .head .btn-wrap a { font-size: 12px; color: #666; margin-left: 5px; }
.board-table-wrap .reply-area .reply-list .reply .head .btn-wrap a:hover { text-decoration: underline; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .content { padding: 5px 15px 15px; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .content .tag-name { display: inline-block; margin-right: 5px; background-color: #2932cb; color: #fff; padding: 2px 10px; border-radius: 15px; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .content p { white-space: pre-wrap; display: inline-block; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .content textarea { width: 100%; height: 120px; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .content .btn-wrap { margin-top: 10px; text-align: right; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .comment-toggle + label { font-size: 12px; margin: 5px 15px 15px; color: #888; display: inline-block; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .comment-toggle + label:hover { text-decoration: underline; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .comment-toggle + label .on { display: none; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .comment-toggle:checked + label .on { display: inline; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .comment-toggle:checked + label .off { display: none; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .comment-toggle + label img { width: 14px; margin-top: 2px; opacity: 0.5; }

.board-table-wrap .reply-area .reply-list .reply .content-wrap .comment-list .comment { padding-left: 30px; background: #f8f8f8; position: relative; border-top: 1px solid #e5e5e5; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .comment-list .comment:before { width: 1px; height: 12px; background: #ccc; position: absolute; content: ''; left: 20px; top: 13px; }
.board-table-wrap .reply-area .reply-list .reply .content-wrap .comment-list .comment:after { width: 12px; height: 1px; background: #ccc; position: absolute; content: ''; left: 20px; top: 25px; }

/* 로딩창 */
.loading-pop-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.2);
}
/*loading-pop-wrap을 이미지 업로드 팝업과 게시판 파일 업로드 동시에 쓰기위해 min-width를 분리*/
.loading-pop-wrap.width-960 {
  min-width: 960px;
}
.loading-pop-wrap .loading-pop-area {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 도넛 */
.loading-pop-wrap .loading-pop-area > .loading {
  width: 45px;
  height: 45px;
  position: absolute;
  left: 50%;
  margin-left: -22.5px;
  top: 50%;
  margin-top: -22.5px;
}
.loading-pop-wrap .loading-pop-area > .loading .loading-bar {
  border-top: 6px solid transparent;
  border-bottom: 6px solid #2ea7e0;
  border-left: 6px solid #2ea7e0;
  border-right: 6px solid transparent;
  animation: loading 0.8s cubic-bezier(0.4, 0.18, 0.63, 0.86) 0.2s infinite;
  border-radius: 80px;
  width: 45px;
  height: 45px;
  display: block;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}