@charset "UTF-8";

@import url('fonts.css'); /* 웹폰트 설정 */
@import url('layout.css'); /* 레이아웃 설정 */
@import url('popup.css'); /* 팝업 설정 */

* { box-sizing:border-box; -webkit-box-sizing:border-box; }
html, body {height:100%; margin:0; padding:0;}
html { font:normal 16px 'NotoSansCJKkr_regular',dotum,'돋움',sans-serif; line-height:1.1; letter-spacing:-0.5px;}
html.font_Big { font-size:20px;}
body {min-height:100%; color:#222; background:transparent; word-wrap:break-word; word-break:break-all;}
img {border:none;}
p, ul, li, ol, h1, h2, h3, h4, h5, h6, dl, dt, dd, em, figure {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 { font-size:1em; font-family: 'NotoSansCJKkr'; font-weight:normal;}
li {list-style:none;}
fieldset {margin:0; padding:0; border:none;}
legend {position:absolute; left:-1000px; top:-1000px; height:0; font-size:0; line-height:0; visibility:hidden;}
a {margin:0; color:#222; text-decoration:none; outline:none;}
table {width:100%; border-collapse:collapse;}
table caption {display:none;position:absolute; left:-999px; height:0; font-size:0; line-height:0; visibility:hidden; overflow:hidden;}
table td, table th {padding:0;}
table th { font-family: 'NotoSansCJKkr'; font-weight:normal; }
button {margin:0; padding:0; font-family:'NotoSansCJKkr',dotum,'돋움',sans-serif; color:#222; vertical-align:middle; background:0; border:none; overflow:visible; cursor:pointer;}
button:focus {outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0.2);}
input[type=text], input[type=password], input[type=number], input[type=rang], input[type=email], input[type=url], input[type=date], input[type=datetime], input[type=month], input[type=tel], input[type=search], input[type=color] {
		display:inline-block; height:40px; line-height:40px; margin:0; padding:0 10px; vertical-align:middle; background-color:#fff; border:1px solid #e8e8e8;  box-sizing:border-box; -webkit-box-sizing:border-box;
}
input[type=password] {font-family:'NotoSansCJKkr','맑은 고딕', dotum,'돋움',sans-serif;}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus {color:#222; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
 input[type=radio] { margin:0; vertical-align:middle; font-size:16px; border:none; border-radius:0; }
input[type=checkbox] { width:19px; height:19px; margin-right:5px; border-radius:2em; background:url("../images/icon_check_off.png") no-repeat center; background-size:19px; -webkit-appearance:none; appearance:none;}
input[type=checkbox]:checked { background:url("../images/icon_check_on.png") no-repeat center; background-size:19px;}
input[type=radio] {width:19px; height:19px; margin-right:5px; color:#a1a1a1;}
input::-webkit-input-placeholder { color:#9c9c9c; font-size:0.875rem; font-family: 'NotoSansCJKkr';}
input::-moz-placeholder { color:#9c9c9c; font-size:0.875rem; font-family: 'NotoSansCJKkr';}
input::-ms-input-placeholder { color:#9c9c9c; font-size:0.875rem; font-family: 'NotoSansCJKkr';}
select { height:40px; padding:0 0 0 10px; border:1px solid #e8e8e8; vertical-align:middle; line-height:1.1;  font-family: 'NotoSansCJKkr'; outline:none; color:#8f8f8f; font-size:16px;}
textarea { width:100%;  padding:10px; border:0px; color:#969797;  resize:none; box-sizing:border-box;  font-family: 'NotoSansCJKkr';}
textarea:focus { color:#666; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
/* label, label span { position:relative; top:-1px; display:inline-block; vertical-align:middle;} */
hr {height:3px; margin:16px 7px; background:url("../images/dotline01.png") repeat-x 0 0; background-size:6px auto; border:none;}
article, aside, footer, header, hgroup, nav, section, figure {display:block; padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;}
a[href^=tel] {padding-left:1em; text-decoration:underline; background:url("../images/btn_tel.png") no-repeat 0 0; background-size:auto 96%;}
em, address {font-style:normal; color:#222;}
sub {font-weight:normal; vertical-align:middle;}
img {max-width:100%;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none; margin:0;}
textarea::-webkit-input-placeholder {color:#c2c2c2;}
strong { font-weight:normal; font-family: 'NotoSansCJKkr'; letter-spacing:0px;}

/* common */
.f {width:100%;}
.mid {vertical-align:middle;}
.vtop {vertical-align:top;}
.alignL {text-align:left !important;}
.alignr {text-align:right !important;}
.cen {text-align:center !important;}
.hide { position:absolute !important; left:-10000px !important; top:-10000px  !important; visibility:hidden;}
.none { display:none !important;}
.clear:after {display:block; clear:both; content:" "; width:0; height:0; line-height:0; font-size:0; overflow:hidden; visibility:hidden;}
.ellipsis {text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.btnC { margin:0 auto; text-align:center;}
.btnR { margin:0 auto; text-align:right;}
.pt30 { padding-top:30px;}
.pt50 { padding-top:50px;}
.mb20 { margin-bottom:20px;}
.mb30 { margin-bottom:30px;}
.mrT10 { margin-top:10px;}
.mrT15 { margin-top:15px;}
.mrT25 { margin-top:25px;}
.mrT30 { margin-top:30px;}
.mrT50 { margin-top:50px;}
.mrL30 { margin-left:30px;}
.mrL50 { margin-left:50px;}
.posR { position:absolute; right:0; top:0;}

/* skipToContent */
#skipToContent a { position:absolute; top:0px; left:0px; z-index:-9999em; width:100%; height:1px; margin-top:-1px; display:block; 	background-color:#3875c1; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden;}
#skipToContent a:focus,#skipToContent a:active { margin-top:0px; height:auto; padding:10px 0px;}

/* selcet */

/* font-color */
.f01 { color:#3097c0 !important;}/* 파랑 */
.f02 { color:#66b857 !important;}/* 녹색 */
.f03 { color:#8f8f8f !important;}/* 회색 */
.f04 { color:#000 !important;}/* 검정 */

/* btn_guide */
.btn_gray { color:#fff; font-size:1.063rem; text-align:center; background:#a3a3a3;}
.btn_gray01 { color:#fff; font-size:0.938rem; text-align:center; background:#6f6f6f;}
.btn_blue01 { color:#fff; font-size:0.938rem; text-align:center; background:#155e7c;}
.btn_blue02 { color:#fff; font-size:0.938rem; text-align:center; background:#1d7abd;}


/* paging */
.pagingBox { position:relative;}
.pagingBox .paging { padding:30px 0; text-align:center; vertical-align:top;}
.pagingBox .paging .num { vertical-align:top; color:#909090; display:inline-block; line-height:25px; }
.pagingBox .paging .num a { color:#aaa;}
.pagingBox .paging .num .active { font-weight:bold; color:#000;}
.pagingBox .paging a { display:inline-block; height:45px; line-height:45px; padding:0 18px; font-size:1rem;}
.pagingBox .paging .btn_prev01 { width:45px; height:45px; padding:0; vertical-align:top; border:1px solid #e8e8e8; background:url("../../common/images/icon_arrowL.png") no-repeat center;}
.pagingBox .paging .btn_next01 { width:45px; height:45px; padding:0;  vertical-align:top; border:1px solid #e8e8e8; background: url("../../common/images/icon_arrowL.png") no-repeat center; transform:rotate(-180deg); -webkit-transform:rotate(-180deg); }
.pagingBox .paging .btn_prev01.active {  background:#8a8a8a url("../../common/images/icon_arrowL_w.png") no-repeat center;}
.pagingBox .paging .btn_next01.active {  background:#8a8a8a url("../../common/images/icon_arrowL_w.png") no-repeat center; transform:rotate(-180deg); -webkit-transform:rotate(-180deg);}


/* switch button */
.switch {display:inline-block; vertical-align:middle; width:108px; height:35px; border-radius:2rem; cursor:pointer; z-index:100; box-sizing:border-box;}
.switch-input {  position:absolute;top:0;left:0; opacity:0;}
.switch-label {  position:relative; display:block; height:100%; min-height:100%; text-transform:uppercase; border-radius:2rem; box-sizing:border-box; background:#c3c3c3;}
.switch-input:checked + .switch-ani .switch-label { background:#2a9ca6; border:0;}
.switch-input + .switch-ani .switch-label:before {content:"미연동"; position:absolute; top:8px; right:15px; font-size:1rem; color:#fff;text-align:right;line-height:1; z-index:101;}
.switch-input:checked + .switch-ani .switch-label:before {content:"연동"; color:#fff;  right:initial; left:30px;}
.switch-handle { position:absolute; top:50%; left:4px; width:29px; height:29px; border-radius:1rem; -webkit-transform: translateY(-50%);transform: translateY(-50%); background:#fff;}
.switch-input:checked + .switch-ani .switch-handle { left:75px; background:#fff;}
.switch-green > .switch-input:checked + .switch-ani .switch-label {  background:#45b9e5;}
label.switch, label.switch span { display:grid;}