@charset "utf-8";

/* ---------------------------------------------------
Company: pointweb
---------------------------------------------------- */

/* Common */
html , body{height:100%;word-break:keep-all;}
html {height:100%;box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box}
*, *:before, *:after{margin:0px;padding:0px;box-sizing:inherit; -moz-box-sizing:inherit;-webkit-box-sizing:inherit}
body{overflow-x:hidden;margin:0 3.125rem;height:100%;font-family:"Noto Sans KR";font-size:16px;font-weight:300;text-align:left;/*font:inherit;*/line-height:1.15;vertical-align:baseline;color:#333; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;-ms-overflow-style: scrollbar;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
address, article, aside, canvas, details, figure, figcaption, footer, header, hgroup, menu, nav, section {display:block\9; margin:0\9; padding:0\9;}
hr {display:none;}
caption {overflow:hidden; height:0px; font-size:0px; line-height:0px;}
h1, h2, h3, h4, h5, h6{font-weight:normal}
img {border:none; vertical-align:middle;width:100%}
ol, ul, li, dl, dt, dd {list-style:none}
table {width:100%;border:0px;border-spacing:0px;table-layout:fixed;border-collapse:collapse;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;	-o-box-sizing: border-box}
th, td {border:0px; word-break:keep-all; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box;}
fieldset {width:100%; border:0px;}
legend {display:none;}
frameset {border:0px;}
iframe {width:100%; border:0px;}
em, address {font-style:normal;}
button, a, input, label, textarea {vertical-align:middle;}
a, a:visited,a:hover,a:focus,a:active {text-decoration:none;cursor:pointer;box-sizing:border-box;color:#333}
select , input, button{font-family:"Noto Sans KR"; font-family:"Noto Sans KR"\9; vertical-align:middle}
button {overflow:visible; /*outline:none;*/ cursor:pointer; border:0px;}
button::-moz-focus-inner {padding:0px;}
select, input, textarea {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box;}
small{font-size:80%}
::-moz-selection {color:#fff;background:#0a4179}
::selection { color:#fff;background:#0a4179}
:lang(en) , .feng, .menupack a{font-family:'Poppins', sans-serif;text-transform:uppercase}

textarea,input,select,button{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-border-radius:0;border-radius:0;border:0;line-height:normal}
  /* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-border-radius:0}
input[type="radio"], input[type="checkbox"] {border:none}
input[type="text"], input[type="password"] {width:100%;height:48px;padding:4px 15px;border:1px dotted #afafaf;font-size:15px;color:#333;line-height:32px;background-color:#ffffff;appearance:none;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;transition: all .2s ease-out;   -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; -webkit-transition: all .2s ease-o}
input:focus,textarea:focus,button:focus,select:focus{outline: none}
input[type="text"]:focus, input[type="password"]:focus {border-bottom:1px solid #0a4179}
select {width:100%;height: 48px;padding:0 0.714rem ;border:1px dotted #c3c3c3;-webkit-appearance: none;-moz-appearance: none;appearance: none;background:#fff url('/_public/img/sub/arrow-down.svg') no-repeat 96% 50%;background-size:20px}
select::-ms-expand {display: none}
textarea{margin:1px 0;padding:5px 10px 4px 10px;border:1px dotted #c3c3c3;border-radius:0}
input[type="file"]{height:30px;background:none;}

/* Placeholder Color */
:-ms-input-placeholder {font-weight:300;color:#c7c7c7} /* IE 10 + */
::-webkit-input-placeholder {font-weight:300;color:#c7c7c7} /* Webkit Browser */
:-moz-placeholder {font-weight:300;color:#c7c7c7}	/* Mozilla Firefox 4 to 18*/
::-moz-placeholder {font-weight:300;color:#c7c7c7} /* Mozilla Firefox 19+ */

/*버튼*/
.ct-btn{display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .8rem 0;
    line-height: 1.5;
    border-radius: 0px;
    transition: background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out
	box-sizing:border-box;-moz-box-sizing:content-box;
	background: transparent;
	outline:0;
	vertical-align:middle;
	font-size:17px !important;
	text-decoration:none;
	white-space:nowrap;
	cursor:pointer;
	-moz-transform: skewX(-15deg);
	-webkit-transform:skewX(-15deg);
	transform:skewX(-15deg);
}
.ct-btn span{position:relative;display:inline-block;-moz-transform: skewX(15deg);-webkit-transform: skewX(15deg);transform: skewX(15deg)}
.btn-blue{font-size:inherit;color:inherit;background-color:#18bde4;border:1px solid #18bde4;border:0;-webkit-box-shadow:none;box-shadow:none}
.btn-line{font-size:inherit;color:inherit;background-color:transparent;border:1px solid #dedede;color:#003 !important;-webkit-box-shadow:none;box-shadow:none}
.btn-gray{font-size:inherit;color:inherit;background-color:#333;border:1px solid #333;color:#fff !important;-webkit-box-shadow:none;box-shadow:none}

a.arr-links {
  padding-left: 40px;
  padding-right: 50px;
  position: relative;
  color: #FFF;
  -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition-property: color, background-color;
  -moz-transition-property: color, background-color;
  -ms-transition-property: color, background-color;
  -o-transition-property: color, background-color;
  transition-property: color, background-color
}


.arr-links:before {
  content: "";
  position: absolute;
  right: 23px;
  top: 52%;
  width: 15px;
  margin-left: -10px;
  margin-top: -1px;
  height: 1px;
  background: #FFF
}

.arr-links:after {
  content: "";
  position: absolute;
  right: 23px;
  top: 52%;
  width: 8px;
  margin-top: -1px;
  margin-left: -2px;
  height: 1px;
  background: #FFF;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom
}

.board.request .btnarea li.cancel .arr-links:before,
.board.request .btnarea li.cancel .arr-links:after,
.sbus .btnarea .btn-line.arr-links:before,
.sbus .btnarea .btn-line.arr-links:after,
.samlwrap .btnarea .btn-line.arr-links:before,
.samlwrap .btnarea .btn-line.arr-links:after,
.arr-links:hover, .arr-links:focus, .arr-links:active {text-decoration: none}

.arr-links:hover:before, .arr-links:focus:before, .arr-links:active:before {
  -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-animation: arrow 2.6s cubic-bezier(1, 0, 0, 1) 0s infinite;
  -moz-animation: arrow 2.6s cubic-bezier(1, 0, 0, 1) 0s infinite;
  animation: arrow 2.6s cubic-bezier(1, 0, 0, 1) 0s infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both
}

.arr-links:hover:after, .arr-links:focus:after, .arr-links:active:after {
  -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-animation: arrow2 2.6s cubic-bezier(1, 0, 0, 1) 0.2s infinite;
  -moz-animation: arrow2 2.6s cubic-bezier(1, 0, 0, 1) 0.2s infinite;
  animation: arrow2 2.6s cubic-bezier(1, 0, 0, 1) 0.2s infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both
}

.arr-links.btns-inverse {
  -webkit-transition-property: color, background-color;
  -moz-transition-property: color, background-color;
  -ms-transition-property: color, background-color;
  -o-transition-property: color, background-color;
  transition-property: color, background-color
}

@-webkit-keyframes arrow {
  0% {
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0
  }
  10% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1
  }
  100% {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
    opacity: 0
  }
}

@-moz-keyframes arrow {
  0% {
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0
  }
  10% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1
  }
  100% {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
    opacity: 0
  }
}

@keyframes arrow {
  0% {
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0
  }
  10% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1
  }
  100% {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
    opacity: 0
  }
}


@-webkit-keyframes arrow2 {
  0% {
    -webkit-transform: translate(-10px, -10px) rotate(45deg);
    -moz-transform: translate(-10px, -10px) rotate(45deg);
    -ms-transform: translate(-10px, -10px) rotate(45deg);
    transform: translate(-10px, -10px) rotate(45deg);
    opacity: 0
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(45deg);
    -moz-transform: translate(0, 0) rotate(45deg);
    -ms-transform: translate(0, 0) rotate(45deg);
    transform: translate(0, 0) rotate(45deg);
    opacity: 1
  }
  100% {
    -webkit-transform: translate(10px, 10px) rotate(45deg);
    -moz-transform: translate(10px, 10px) rotate(45deg);
    -ms-transform: translate(10px, 10px) rotate(45deg);
    transform: translate(10px, 10px) rotate(45deg);
    opacity: 0
  }
}

@-moz-keyframes arrow2 {
  0% {
    -webkit-transform: translate(-10px, -10px) rotate(45deg);
    -moz-transform: translate(-10px, -10px) rotate(45deg);
    -ms-transform: translate(-10px, -10px) rotate(45deg);
    transform: translate(-10px, -10px) rotate(45deg);
    opacity: 0
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(45deg);
    -moz-transform: translate(0, 0) rotate(45deg);
    -ms-transform: translate(0, 0) rotate(45deg);
    transform: translate(0, 0) rotate(45deg);
    opacity: 1
  }
  100% {
    -webkit-transform: translate(10px, 10px) rotate(45deg);
    -moz-transform: translate(10px, 10px) rotate(45deg);
    -ms-transform: translate(10px, 10px) rotate(45deg);
    transform: translate(10px, 10px) rotate(45deg);
    opacity: 0
  }
}

@keyframes arrow2 {
  0% {
    -webkit-transform: translate(-10px, -10px) rotate(45deg);
    -moz-transform: translate(-10px, -10px) rotate(45deg);
    -ms-transform: translate(-10px, -10px) rotate(45deg);
    transform: translate(-10px, -10px) rotate(45deg);
    opacity: 0
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(45deg);
    -moz-transform: translate(0, 0) rotate(45deg);
    -ms-transform: translate(0, 0) rotate(45deg);
    transform: translate(0, 0) rotate(45deg);
    opacity: 1
  }
  100% {
    -webkit-transform: translate(10px, 10px) rotate(45deg);
    -moz-transform: translate(10px, 10px) rotate(45deg);
    -ms-transform: translate(10px, 10px) rotate(45deg);
    transform: translate(10px, 10px) rotate(45deg);
    opacity: 0
  }


/* 건너뛰기 링크 */
#skip_navi {position:absolute;top:0;height:0px;width:100%;z-index:30;}
#skip_navi a {display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; text-align:center;color:#fff;white-space:nowrap;}
#skip_navi a:focus,
#skip_navi a:active {display:block;top:0;width:100%;height:20px;padding:5px 0;background:#0089d6;}

/* 로딩 */
.loadingWrap{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:80}
.loadingWrap img {position: absolute;top: 50%;left: 50%;margin-top: -18px;margin-left: -18px;}

/*blind*/
.blind{display:block; overflow:hidden; width:0; height:0; position:absolute; top:0; left:0; font-size:0; line-height:0}

/* 탑으로 이동 */
.action_top {text-align:center;position:fixed;right:6%;bottom:4%;display:none;font-size:2.000rem;z-index:48888;width:50px;height:50px;border-radius:50%;background:#ffbb43}
.action_top:hover {cursor:pointer}
.action_top i{color:#fff;opacity:0.9;line-height:2.5;font-size:1.214rem}
.action_top:hover a {opacity:1}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}