@charset "utf-8";
/*@import '../../css/fonts.css';*/


/* Basic Style START () */
 * {-webkit-tap-highlight-color:rgba(255,255,255,0);user-select: none;-webkit-touch-callout: none;}
html, body {width:100%; height:100%;line-height: 1;font-size: 15px;color: #1e1e1e;font-family: 'GachiDeohagi', 'notokr', "맑은고딕", "Malgun Gothic", malgun, "돋움", Dotum, "굴림", Gulim, 'AppleSDGothicNeo-Light', AppleGothic, Helvetica, Arial, 'HelveticaNeue-Light', 'sans-serif-light', sans-serif;-webkit-text-size-adjust: none; -ms-text-size-adjust: none;font-weight: 400; background:#fff;}
input, select, textarea {font-family: 'GachiDeohagi','notokr', "맑은고딕", "Malgun Gothic", malgun, "돋움", Dotum, "굴림", Gulim, 'AppleSDGothicNeo-Light', AppleGothic, Helvetica, Arial, 'HelveticaNeue-Light', 'sans-serif-light', sans-serif;font-weight: 400;}
button, pre, code, h1, h2, h3, h4, h5, h6, table {font-family: 'GachiDeohagi', 'notokr', "맑은고딕", "Malgun Gothic", malgun, "돋움", Dotum, "굴림", Gulim, 'AppleSDGothicNeo-Light', AppleGothic, Helvetica, Arial, 'HelveticaNeue-Light', 'sans-serif-light', sans-serif; font-weight: 400; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
html, body, div, form, input, select, button, textarea, legend, fieldset, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, blockquote, address, p, th, td, caption { margin:0; padding:0; }
ol, ul, li { list-style:none;  -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
img, fieldset { border:0 none; }
img { -webkit-perspective: 1; }
img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
}
a { cursor:pointer; -webkit-tap-highlight-color: transparent;}
a:link, a:visited { text-decoration:none; color:#252525;}
a:active, a:hover, a:focus { text-decoration:none; }

input, select, textarea { vertical-align:middle; resize:none; position:relative; outline:none; }
input, textarea { -webkit-appearance:none; -webkit-border-radius:0; border-radius:3px}
input, select{border:1px solid #d2d6dd; font-size: 16px; border-radius:5px;font-weight : 400; letter-spacing: -0.025em; line-height: 1.2; word-break: break-all; vertical-align: middle; cursor:pointer; background-color: #fff; height:42px; padding:0 10px; width:calc(100% - 22px);}
textarea  {border:1px solid #d2d6dd; padding: 15px 10px 15px 10px;font-size: 16px; border-radius:5px;font-weight : 400; letter-spacing: -0.025em; line-height: 1.3; word-break: break-all; cursor:pointer; background-color: #fff; width:calc(100% - 22px);}
select {padding: 5px 20px 5px 14px;line-height: 1.35; word-break: break-all; vertical-align: middle;
    	-webkit-appearance: none; -moz-appearance: none; appearance: none; background:#fff url('../images/content/icon_down.png') no-repeat 98% 8px; /* 화살표 아이콘 추가 */  background-size: 24px 25px; width:100%;height:44px;}
input::placeholder {font-size: 15px; font-weight: 400; color: #666;letter-spacing: -1px; } 
input[readonly] {background-color: #E9E9E9;border:1px solid #E9E9E9;}
input[disabled] {background-color: #E9E9E9;border:1px solid #E9E9E9;}
input[type=text]::placeholder { color:#999;}
input[type=checkbox] { -webkit-appearance:checkbox; }
input[type=checkbox]:disabled {cursor:default}
input[type=checkbox] { margin:0 3px 0 10px; width: 22px; height:22px;} 
input[type=checkbox]:first-child { margin-left:0;}
input[type=radio] { -webkit-appearance:radio; -webkit-border-radius:10px; }
input[type=radio]:disabled {cursor:default}
/* input[type=tel]:disabled {background: #F6F6F6;outline:1px solid #F6F6F6; height:25px;min-height: 1.8em;} */
input[type=date] {border: 0; padding: 0; width: 100%; font-size: 14px; cursor:pointer;border-radius:3px}
input[type=date].half {border: 1px solid #ccc; padding: 3px; width: 45%; font-size: 14px; cursor:pointer}
input[type=time] {border: 0; padding: 0; width: 100%; font-size: 14px; cursor:pointer;}
input[type=month] {border: 0; padding: 0; width: 100%; font-size: 14px; cursor:pointer;}
input.basic { height:19px; line-height:19px; padding:0 5px; border:1px solid #cacaca; }
input.read { height:19px; line-height:19px; padding:0 5px; border:1px solid #cacaca; background: #f7f7f7;}
textarea.basic { border:1px solid #cacaca; padding:5px; overflow:scroll; overflow-x:hidden; }
select.basic { height:21px; }
input[type=radio] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
input[type=radio] + label { display: inline-block; position: relative; padding-left: 24px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; vertical-align:middle;}
input[type=radio] + label:before { content: ''; position: absolute; left: 0; top: -1px; width: 17px; height: 17px; text-align: center; background: #fafafa; border: 1px solid #cacece; border-radius: 100%;}
input[type=radio] + label:active:before, .checks input[type=radio]:checked + label:active:before { }
input[type=radio]:checked + label:before { background: #fff; border-color: #FFDE00; }
input[type=radio]:checked + label:after { content: ''; position: absolute; top: 4px; left: 5px; width: 9px; height: 9px; background: #FFDE00; border-radius: 100%;}

.txt-no input[type=radio] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.txt-no input[type=radio] + label { display: inline-block; position: relative; padding-left: 20px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-size:0px; }
.txt-no input[type=radio] + label:before { content: ''; position: absolute; left: 0; top: -12px; width: 17px; height: 17px; text-align: center; background: #fafafa; border: 1px solid #cacece; border-radius: 100%;}
.txt-no input[type=radio] + label:active:before, .checks input[type=radio]:checked + label:active:before { }
.txt-no input[type=radio]:checked + label:before { background: #fff; border-color: #FFDE00; }
.txt-no input[type=radio]:checked + label:after { content: ''; position: absolute; top: -7px; left: 5px; width: 9px; height: 9px; background: #FFDE00; border-radius: 100%;}


button { border:0 none; background:transparent; cursor:pointer; }
hr { display:none; }
legend, .hide { width:1; height:0; visibility:hidden; font-size:0; line-height:0; position:absolute; top:0; left:0; overflow:hidden; }
table caption { width:0; height:0; visibility:hidden; text-indent:-9999px; font-size:0; line-height:0; }
table {border-collapse:collapse; border-spacing:0; }
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display:block; }
																							 
label {font-size: 15px; font-weight: 400; color:#333; vertical-align: middle;}

strong { font-weight:500;}
em{ font-style:normal;}
.ir{overflow:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;color:transparent;border:0;clip:rect(0 0 0 0);}
.blind {width:0; height:0; line-height:0; font-size:0; overflow:hidden;}

.fl{float:left !important;}
.fr{float:right !important;}
.clear{clear:both !important;}

.tl{text-align:left !important;}
.tr{text-align:right !important;}
.tc{text-align:center !important;}

.center {margin:0 auto !important;}

.mr0 { margin-right:0 !important;}
.mr20 { margin-right:20px !important;}
.mr30 { margin-right:30px !important;}
.mr50 { margin-right:50px !important;}

.mt0 { margin-top:0px !important;}
.mt3 { margin-top:3px !important;}
.mt5 { margin-top:5px !important;}
.mt10 { margin-top:10px !important;}	 
.mt15 { margin-top:15px !important;}
.mt20 { margin-top:20px !important;}
.mt25 { margin-top:25px !important;}
.mt30 { margin-top:30px !important;}
.mt40 { margin-top:40px !important;}

.pt20 { padding-top:20px !important;}
.pb20 { padding-bottom:20px !important;}
.pr6 { padding-right:6px !important;}

.ml0 { margin-left:0px !important;}
.ml25 { margin-left:25px !important;}

.mb0 { margin-bottom:0px !important;}
.mb5 { margin-bottom:5px !important;}
.mb15 { margin-bottom:20px !important;}


.ptb0 { padding-top:0 !important; padding-bottom:0 !important;}
.plr0 { padding-left:0 !important; padding-right:0 !important;}
.pl0 { padding-left:0 !important;}
.pl20 { padding-left:20px !important;}
.pl30 { padding-left:30px !important;}

.w088 { width:88px !important;}
.w85 { width:85% !important;}
.w100 { width:100% !important;}				   

.ft17 { font-size:17px !important;}
.ft16 { font-size:16px !important;}
.ft15 { font-size:15px !important;}
.ft14 { font-size:14px !important;}
.ft13 { font-size:13px !important;}
.ft12 { font-size:12px !important;}

.distb{display:table !important;}

.point1{ font-weight:700 !important; color:#d0021b !important;}
.point2{ font-weight:700 !important; color:#3F68D2 !important;}
.point3{ font-weight:700 !important; color:#fc0303 !important;}
.b700{ font-weight:700 !important;}
.b900{ font-weight:900 !important;}

p{line-height:1.2;}

.dis {background-color: #F1F8FF !important; color:#00B1BA;} 
.bg_e { background-color:#f3f4f7 !important;} /*표에서 빈공간 컬러(배경있는경우)*/
.bg0 { background-color:#fff !important;}
.bg_r {background-color:#fdba95 !important;}

.fcl01{ color:#3F69D2 !important;}
.fcl02{ color:#d0021b !important;}

.bor_t{border-top:1px #ddd solid!important;}
.bor_b{border-bottom:1px #ddd solid!important;}
.bor_nb{border-bottom:0px #ddd solid!important;}

/* Basic Style END */



/*top*/
#header{position:fixed; margin:0 auto;padding:0; width:100%; height:56px; background-color:#fff;z-index: 100; line-height:56px; padding-top: env(safe-area-inset-top);}
#header h1{margin:0 auto; padding:0px 0 0 0; font-size:18px; font-weight:700;text-align:center; color:#252525; letter-spacing:-0.025em;}


/*topNav*/
ul#topNavL{position:absolute;top:calc(env(safe-area-inset-top) + 12px); left:15px;width:auto;}
ul#topNavL li{ float:left; color:#fff; font-size:12px; font-weight:400; }
/*
ul#topNavL li a.back {display:inline-block;background: url('../images/content/back.png') center center no-repeat;background-size:contain;width:32px;height:32px;}
ul#topNavL li a.home {display:inline-block;background: url('../images/content/home.png') no-repeat;background-size:contain;width:40px;height:24px; background-position-x: center; margin-left: 5px}

ul#topNavL li a.all {display:inline-block;background: url('../images/content/top_btn_all.png') no-repeat;background-size:contain;width:21px;height:17px; background-position-x: center; margin-top:5px;}
*/

ul#topNavR{position:absolute;top:calc(env(safe-area-inset-top) + 11px); right:15px;width:auto; z-index:100;}
ul#topNavR li{ float:left; color:#fff; font-size:12px; font-weight:400; }
ul#topNavR li:last-child{float:right;}

ul#topNavR li a.del {display:inline-block;background: url('../images/content/top_del.png') center center no-repeat;background-size:contain;width:32px;height:32px;}
/*
ul#topNavR li a.back {display:inline-block;background: url('../images/content/back.png') no-repeat;background-size:contain;width:32px;height:32px;}
*/
																		
/* 우편상단 */
.add-top{position:fixed; margin:0 auto;padding:0; width:100%; height:32px; background-color:#fff;z-index: 100; top:56px; padding-top:5px;}
.add-top span{ display:inline-block;}
.add-top span.btn{ margin-left:5%;height:20px;font-size:13px; line-height:20px;width:70px; padding:0; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;border: 1px solid #E7241F;background:#fff;color:#E7241F; text-align:center;}
.add-top span.txt{ margin-left:5px;font-size:13px;}

/* ct */
#ct {position: absolute; padding:0; margin:0px 0px 30px 0px; width:100%; overflow:auto; z-index:1; top:calc(56px + env(safe-area-inset-top) ); clear:both;}
#add-ct {position: absolute; padding:0; margin:0px 0px 30px 0px; width:100%; overflow:auto; z-index:1; top:93px; clear:both;}
.cont {width:90%;margin:0 auto;}

.txtsection { position:relative; z-index:1; text-align:left; padding:0px 23px 0px 23px; min-height:142px; background:#fff;border-radius:17px;border:1px solid #DFDDDD;box-shadow: 1px 20px 20px rgba(60, 102, 210, 0.08); overflow:hidden;margin-bottom:40px;}
.guide_txt { text-align:center; width:100%; font-size:16px; padding:14px 0; line-height:1.4; letter-spacing:-1px;}


.coltbl{width: 100%; word-break: break-all; color:#252525;border-collapse: separate;border-spacing: 0; margin-top:10px;}/*필드4개이상*/
.coltbl th{position: relative; padding:6px 5px 6px 5px; font-size: 14px; font-weight:700; letter-spacing:-0.5px; word-break: break-all;vertical-align: middle; line-height:1.2; background:#DCE8F4;text-align:center; height:30px;}
.coltbl td{position: relative; padding:6px 5px 6px 5px; font-size: 14px; letter-spacing:-0.5px; word-break: break-all;vertical-align: middle; line-height:1.2; text-align:center; font-weight:500;border-bottom:1px #F0F0F0 solid; background:#fff;height:30px;}


/*button*/
button {cursor: pointer; padding:9px 15px 7px; font-size:15px; font-weight:500; color:#5890c5;outline: none;margin:0 auto;-webkit-tap-highlight-color: transparent;}
button[disabled] {cursor: default;}

.btn-wrap{width:auto;margin:0px;padding:0;box-sizing:border-box;letter-spacing:-0.5px;margin-top:30px; }
.btn01{ height:52px;font-size:17px; line-height:47px;width:100%; padding:0; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;border: 1px solid #3F68D2;background:#3F68D2;color:#fff;}
.btn01:nth-child(2), .btn01:nth-child(3){ margin-top:10px;}
.btn02{ height:52px;font-size:17px; line-height:47px;width:100%; padding:0; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;border: 1px solid #61667A;background:#61667A;color:#fff;}
.btn03{ height:44px;font-size:17px; line-height:39px;width:100%; padding:0; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;border: 1px solid #3B589E;background:#3B589E;color:#fff; margin-bottom:10px;}
.md-btn{ height:52px;font-size:17px; line-height:47px;width:100%; padding:0; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;border: 1px solid #3B589E;background:#3B589E;color:#fff;}

.tb_btn01{ height:30px;font-size:14px; line-height:25px;width:100%; padding:0; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;border: 1px solid #3B589E;background:#3B589E;color:#fff;}
.tb_btn02{ height:50px;font-size:14px; line-height:1.2;width:50px; padding:0; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;border: 1px solid #3B589E;background:#3B589E;color:#fff;}
.tb_btn03{ height:30px;font-size:14px; line-height:25px;width:70px; padding:0; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;border: 1px solid #E9E9E9;background:#E9E9E9;color: #666666;}

a.btn-center{font-size:12px;padding:5px 0 3px 0;border-radius:14px; background:#3C1E1E; width:94%; text-align:center; display:inline-block;letter-spacing:-0.5px; color:#fff; margin-top:10px; letter-spacing:-0.5px; margin-left:3%; margin-bottom:6px;}
a.btn-center span{display:inline-block; height:16px;background: url('../images/content/info_btn.png') no-repeat right 1px;background-size: 16px; padding:4px 20px 0px 0px;color: #fff;}



/* 사이드메뉴*/
body.dark { background: rgba(0,0,0,.4); }

#sidenav {height: calc(100% - env(safe-area-inset-bottom)); width: 84%;top: calc(env(safe-area-inset-top)); left: -84%;background: #fff;position: fixed;transition: 0.4s;z-index:15000;}
#sidenav > ul { margin: 0; padding: 0; list-style-type: none; }

.sideright {z-index:200; text-align:right; vertical-align:middle; width:100%;}
#close_sidenav {cursor: pointer;font-size: 28px;margin-top: 9px;margin-right:18px;z-index:200; font-weight:400;float: right; -webkit-tap-highlight-color: transparent;}
.side_login{cursor: pointer;margin-top: 12px;margin-right:20px;z-index:200; float: right;}
.side_login a{padding:5px 0;border-radius:18px; background:#5674BA; width:68px; text-align:center; display:inline-block;font-size: 12px;font-weight:700; letter-spacing:-0.5px; color:#fff;cursor: pointer;}


.sidenav_top {height:166px; background:#F8F8F8;}
.sidenav_top div.left{margin-left:26px; color:#4B4B4B; letter-spacing:-0.5px; padding-top:10px;}
.sidenav_top div.left span.name{width:54%;font:22px 'NanumSquare', sans-serif;font-weight:700; display:inline-block;}
.sidenav_top div.left span.date{margin-top:8px; font-size:15px;color:#0077C3; display:inline-block;}
.sidenav_top div.left span.date_off{margin-top:8px; font-size:14px; display:inline-block;}

.btn_list {float:left; width:100%;overflow:hidden;margin:0 auto;}
.btn_list ul { list-style:none; margin-left:6%;}
.btn_list li { width:23%;float:left;text-align:center; margin:0 auto;}
.btn_list li:hover {}
.btn_list li a { -webkit-tap-highlight-color: transparent;}
.btn_list li a:hover {}
.btn_list li a > i{text-align:center; display:block; margin-top:22px; margin-bottom:5px;}
.btn_list li a > i img{width: 38px;height: 38px; text-align:center;}
.btn_list li a > span { position:relative; max-height:35px; font-size:13px;}


#sidenav .sidenav_list {margin-left:26px; width: calc(100% - 26px); height:calc(100% - 170px - env(safe-area-inset-bottom)); overflow-y:auto;}
#sidenav a.sidemn {color: #000;display: block;text-decoration: none;padding:17px 20px 17px 0;;z-index:100;/* border-bottom: 1px solid #ddd; */background:url('../images/content/icon_list_01.png') right 18px no-repeat;font-size:17px; font-weight:700;letter-spacing:-0.5px;}
#sidenav a.sidemn:hover {}
#sidenav a.sidemn_up {color: #000;display: block;text-decoration: none;padding:17px 20px 17px 0;;z-index:100;/* border-bottom: 1px solid #ddd; */background:url('../images/content/icon_list_02.png') right 18px no-repeat;font-size:17px; font-weight:700;letter-spacing:-0.5px;}
#sidenav .sidenav_list li table{width: 100%; word-break: break-all; color:#4B4B4B; /* border-bottom: 1px solid #E2E2E2; */ margin-top:6px;}
#sidenav .sidenav_list li table td{position: relative; padding:8px 4px 8px 0px; font-size: 14px; font-weight:400; letter-spacing:-0.5px; word-break: break-all;vertical-align: middle; line-height:1.2;}
#sidenav .sidenav_list li table tr:last-child td{padding:8px 4px 22px 0px;}
#sidenav .sidenav_list li { border-bottom: 1px solid #ddd; }

@media screen and (max-width:320px) {
.side_login{margin-right:12px;}
.sidenav_top div.left{ margin-left:12px;}
.sidenav_top div.left span.name{width:52%;}
#sidenav .sidenav_list {margin-left:6px; width: calc(100% - 6px); height:calc(100% - 156px); overflow-y:auto;}
#sidenav .sidenav_list li table td{font-size: 14px; font-weight:400; letter-spacing:-1.5px;}
}

.page_cover.open {display: block;}
.page_cover {width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;background-color: rgba(0, 0, 0, 0.6);z-index: 4;display: none;z-index:100;}


/*modal popup*/
#modal{display:none;position:fixed; width:100%; height:100%;top:0; left:0; background:rgba(0,0,0,0.6);}
.modal-con{display:none;position:fixed;top: calc(50% - 5px); left:50%;transform: translate(-50%,-50%);width: 80%;/*min-height: calc(30% - 50px);*/border-radius: 15px 15px 15px 15px;background:#fff;}
.modal-con .title{font-size:20px; padding: 20px; border-radius: 15px 15px 0px 0px;}
.modal-con .con{font-size:15px; line-height:1.3;padding: 40px 30px 30px 30px;min-height: calc(30% - 110px);background:#fff;border-radius: 15px 15px 0px 0px; text-align:center; letter-spacing:-0.5px;}
.modal-con .close{display:block;position:absolute;width:30px; height:30px;text-align:center; line-height: 30px;text-decoration:none;color:#4B4B4B; font-size:32px;right:10px; top:10px;}
.bt_area{overflow:hidden;padding:0;width:100%;margin-bottom:-5px;position:relative;border-radius: 0px 0px 15px 15px;border-top:1px solid #fff;}
.bt_area a{display:block;background-color:#3F68D2;font-size:16px;height:50px;line-height:50px;color:#fff;text-align:center;border-radius:0 0 5px 5px;flex:1}
.bt_area a strong {color:#fff;}
.bt_area_v2 a{float:left;width:60%;font-weight:normal;border-left:1px solid #2D51AD;border-radius:0 0 5px 0;box-sizing:border-box;position:relative; color:#fff;}
.bt_area_v2 a strong {}
.bt_area_v2 a:first-child{border-left:0px solid #C3AE11;border-radius:0 0 0 5px;width:40%;background-color:#737373;}
.bt_area_v2 a.all{float:left;width:100%;font-weight:normal;border-left:0px solid #C3AE11;border-radius:0 0 5px 0;box-sizing:border-box;position:relative; color:#fff;}

/*modal page up*/
.modal_up {width: 100%;height: 100%;margin: 0;padding: 0;transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);top: 100%;position: fixed;left: 0;bottom:0;text-align: left;z-index:100;}
.up_page{background:#fff; height:310px;border-radius: 15px 15px 0px 0px; padding:15px 18px 0px 18px;}
.up_header {padding:0px;border-bottom: 1px solid #ddd;position: relative; height:50px; line-height:50px;}
.up_tit { float:left; display:inline-block;font:22px 'NanumSquare', sans-serif; font-weight:800;background: linear-gradient(180deg,rgba(255,255,255,0) 65%, #FAE125 35%); padding:0 4px; margin:12px 0 0 7px;}
.up_close{padding:0px 8px 4px 0px; font-size:30px;color:#000; text-align:center; margin-top:0px; height:42px; line-height:42px; float:right;}
.up_body {padding:0px;overflow-y:auto;}

.container.modal_open .modal_up {top: calc(100% - 310px);}

/*validator*/
.invalid {border: 1px solid red !important;}
.invalidMsg {display: block;font-size: 12px;color: red;padding-top: 4px;margin-left: 6px;}

/* simpleNoDiv */
.simpleNoFocus {background-color: aliceblue;}
.simpleNo {height: 0px; border: 0px; color: transparent; }

.blocker{
    width: 100%;
    height: 100%;
    z-index: 15000;
    background: #0a0a0abf;
    top: 0px;
    left: 0px;
    position: fixed;
}
.loader {
    background: url(../images/main/goto.png) center center no-repeat;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    animation: motion 0.7s linear 0s infinite alternate;
    margin-top: 0;
}
 @keyframes motion {
     0% {margin-top: 0px;}
     100% {margin-top: 30px;}
 }