@charset "utf-8";

/* 초기화 */
*{ -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; }

html {height:100%;font-size:11.333px;}
body {margin:0;padding:0;color:#000;font-size:14px;font-family:sans-serif;width:100%;background:#fff;}
html, body {height:100%;min-height:100%;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, address, em, img, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea, button { -webkit-tap-highlight-color:transparent; margin:0; padding:0; border:0; border:none;}
legend {position:absolute;width:1px;height:1px;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#sir-head ul, header ul, nav ul, #sir-tail ul {margin:0;padding:0;list-style:none}
p {margin:0;padding:0;line-height:1.6em;word-break:break-all}
label, input, select, img, button {margin:0;padding:0}
caption {display:none;}
textarea {font-family:sans-serif}
input {border-radius:0;-webkit-tap-highlight-color: transparent;}
button {margin:0;border-radius:0;font-family:sans-serif;cursor:pointer;border:0;font-size:1.6rem}
input[type=checkbox], input[type=text], input[type=password], input[type=submit], input[type=image], button {-webkit-border-radius: 0;-webkit-appearance: none;vertical-align: middle;}
}
pre {overflow-x:scroll;font-size:1.1rem}
select {margin:0;font-size:1.4rem}
hr {display:none}
img {max-width:100%;height:auto}

a, a:link, a:visited {color:#000;text-decoration:none}
a:focus, a:hover {text-decoration:none}
ul, li, ol, dd, dt, dl {list-style:none;padding:0;margin:0}
table {border-collapse:collapse}
.sound_only, #hd_pop h2 {position:absolute;margin:0 !important;padding:0 !important;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
*, :after, :before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}


.clearfix:after {content:'';display:block;clear:both;}
.float-left {float:left;}
.float-right {float:right;}
.modal-open {overflow:hidden;}

.text-right {text-align:right;}
.text-left {text-align:center;}
.text-center {text-align:center;}
.blind {display:none!important;width:0;height:0;}

.mgt5 {margin-top:5px}
.mgt10 {margin-top:10px}
.mgt15 {margin-top:15px}
.mgt20 {margin-top:20px}
.mgt30 {margin-top:30px}
.mgt40 {margin-top:40px}
.mgt5p {margin-top:5%}
.mgb5 {margin-bottom:5px}
.mgb10 {margin-bottom:10px}
.mgb15 {margin-bottom:15px}
.mgb20 {margin-bottom:20px}
.mgb30 {margin-bottom:30px}
.mgb40 {margin-bottom:40px}
.mgr4 {margin-right:4px}
.mgr5 {margin-right:5px}
.mgr10 {margin-right:10px}
.mgr15 {margin-right:15px}
.mgr20 {margin-right:20px}
.mgl5 {margin-left:5px}
.mgl10 {margin-left:10px}
.mgl15 {margin-left:15px}
.mgl20 {margin-left:20px}
.mgl20p {margin-left:30%; width:32%; float:left; }
.mgl30p {margin-left:50%; width:40%;  }
.mgl80p {margin-left:80%;}
.w60 {width:60px;}
.w80 {width:80px;}
.w100 {width:100px;}
.w120 {width:120px;}
.w150 {width:150px;}
.w180 {width:180px;}
.mgt30p {margin-top:30%;}
.pdt2 {padding-top:3%;}
.pdt30 {padding-top:30%;}
.pdt10 {padding-top:10%;}
.pdt10p {padding-top:10px;}
.pdb10p {padding-bottom:10px;}
.pdl20p {padding-left:20px;}


.input_sq {width:200px; border-radius:0;}

.icon_bg { padding-top:10%;     background-color:#fff;}
.img_size {width:15%; height:15%;  margin-left:43%;}

.border-radius0 { border-radius:0;}

/* loading */
#page-loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: table;background: rgba(0,0,0,.4);z-index: 99999;text-align: center;}
#page-loading i{color:#fff;vertical-align: middle;text-align: center;display: table-cell;font-size: 60px;}

/* 접근성 */
.msg_sound_only, .sound_only, .m_sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* ICON */
.co-ico {}
.co-ico-small {margin:0 0 0 2px}


/* header */
#hd {width:100%;background:#fff;/* box-shadow:0 0 5px #888; */top:0;left:0;z-index:9}
#hd_h1, #tnb h3 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#hd_wrapper {position:relative;padding:0;background:#fff}
#hd_wrapper::after {display:block;visibility:hidden;clear:both;content:''}

#hd .location_sub { height:50px; border-bottom:0px solid #ccc; position:relative; box-sizing:border-box;background:#FFD700; }
#hd .location_sub .user_name {float:left;color:#fff;line-height:50px;padding:0 0 0 10px;font-size:1.5rem;}
#hd .location_sub .user_name:after {content:"\f105";font-family:FontAwesome;font-size:18px;padding-left:10px;}
#hd .btn_back {position:absolute; top:0; left:0;width:50px; height:50px;background:transparent;color:#fff;}
#hd .btn_more {position:absolute; top:0; right:0;width:40px; height:50px;background:transparent;color:#fff;}
#hd .btn_trash {position:absolute; top:0; right:0;width:40px; height:50px;background:transparent;color:#fff;}
#hd .btn_tool {position:absolute; top:0; right:0;width:auto; height:50px;background:transparent;color:#fff;font-size:1.2rem;padding:0 10px;}
#hd .title_sub { text-align:center; font-size:2.0rem; line-height:48px; white-space:nowrap; color:#fff;}

/* gnb */
#gnb_wrap {width:100%;position:relative;top:0px;border-bottom:1px solid #eee;}
#gnb {background:#fff;position:relative;z-index:951;padding-right:0;transition:background 0.1s ease}
#gnb .swiper-slide, #sb_cate .swiper-slide {width:auto}
#gnb_wrap.sticky {border-bottom:1px solid #eee;}
.gnb_menu {padding:0 10px;white-space:nowrap;overflow:hidden}
.gnb_menu ul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_menu li {display:inline-block}
.gnb_menu a {display:block;color:#bbb;padding:0 10px;line-height:45px;font-size:1.2rem;position:relative}
.gnb_menu .gnb_sl {/* background:rgba(0, 0, 0, 0.1); */color:#000;font-weight:bold;position:relative}
.gnb_menu .gnb_sl:after {content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background:#046fd9}
#gnb .fv_btn-wr {position:absolute;top:0;right:0;width:45px;height:45px;padding:7px;background:#fff;z-index:2}
#fv_btn {width:100%;height:31px;border-radius:3px;background:transparent;border:0px solid rgba(0, 0, 0, 0.1);color:#000}
#gnb .next_bg {position:absolute;top:0;right:0;width:26px;height:45px;z-index:2;}

.gnb_menu::-webkit-scrollbar {display:none}
.menu-open {display:none;background:#fff;padding:10px;position:absolute;width:100%;z-index:1000;border-bottom:1px solid #ddd;box-shadow:0 2px 5px rgba(0, 0, 0, 0.125), 0 4px 10px -6px #999 inset}
.menu-open ul:after {display:block;visibility:hidden;clear:both;content:""}
.menu-open li {float:left;width:50%;padding:3px;text-align:center}
.menu-open li a {display:block;line-height:35px;background:#eee;color:#555;}

.sub_menu {background:#FFD700;padding:190px 0 0 0;}
.sub_menu2 {background:#fff;padding:50px 0 0 0;}
.sub_menu ul {background:#FFD700;}
.sub_menu li {float:left;}
.sub_menu li a {display:block;padding:10px;text-align:center;font-size:1.2rem;color:#000; min-width:80px; padding-top:17px;}
.sub_menu li a.active {color:#000;font-weight:600;}
.sub_menu ul:after {content:'';display:block;clear:both;}



/* 버튼 */

a.btn, button.btn, input.btn, span.btn, label.btn {width: 100%;display: inline-block;}
a.btn.fill, button.btn.fill, input.btn.fill, span.btn.fill, label.btn.fill {background-color: #FFD700;color: #000;}
a.btn.fill, button.btn.gray {border:#ccc 1px solid;background-color: #FFD700;color: #666;}
a.btn.big, button.btn.big, input.btn.big, span.btn.big, label.btn.big {height: 48px;font-size: 17px;border-radius: 5px; font-weight:600;}

a.btn.b_border, button.btn.b_border, input.btn.b_border, span.btn.b_border, label.btn.b_border {color: #000;font-weight: bold;border: 1px solid #ccc;   background-color: #fff;}
a.btn_bgcolor:hover {background-color:#fff;}
.btn {font-size:1.2rem;line-height: 1.5;padding:5px 8px;display:inline-block;user-select: none;vertical-align: middle;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.btn-link {color:#555;}
.btn-link i {font-size:18px;}
.btn-link span {float:right;margin-left:4px;font-size: 20px;}
.btn-link:after {content:'';display:block;clear:both;}
.btn-wrap {width: 100%;z-index: 10;padding: 10px;background-color: #fff;}
.btn-wrap.fixed {position:fixed;bottom:0;left:0;right:0;padding: 10px;}
.btn-update {background:#046fd9;color:#fff;border-radius:3px;font-size:1rem;padding:5px 6px;display:inline-block;}
.btn-disabled {background:#ccc!important;}
.btn-help {background:#fff;}

.btn-group-tab {display: -webkit-flex;display: -ms-flex;display: flex;flex-direction: row;align-items: stretch;justify-content: center;}
.btn-group-tab.tab-nav {margin-bottom: 12px;}
.btn-group-tab > a, .btn-group-tab > button, .btn-group-tab > label, .btn-group-tab > li {
	position: relative;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    border: 1px solid #ccd5da;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 17px;
    padding: 5px 0;
    margin-right: -1px;
    min-height: 36px;
    background: #fff;
}

.btn-group-tab > a:first-child, .btn-group-tab > button:first-child, .btn-group-tab > li:first-child {border-top-left-radius: 3px;border-bottom-left-radius: 3px;}
.btn-group-tab input[type=radio], .btn-group-tab input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    border-radius: 0;
}

.btn-group-tab > a.active, .btn-group-tab > a.selected, .btn-group-tab > button.active, .btn-group-tab > button.selected, .btn-group-tab > label.active, .btn-group-tab > label.selected, .btn-group-tab > li.active, .btn-group-tab > li.selected {
    color: #0383d8;
    font-weight: 700;
    border-color: #0383d8;
    border-right-width: 1px;
    z-index: 1;
}

@media all and (min-width:641px) {
  .menu-open li {width:20%}
}


/* 메인메뉴 */
.bannerBar { position:fixed; bottom:0;border-top:0px solid #eee; box-sizing:border-box; width:100%; min-width:320px; z-index:99; background-color:#fff;  bottom: 55px;}
.naviBar { position:fixed; bottom:0;border-top:0px solid #eee; box-sizing:border-box; width:100%; min-width:320px; z-index:99; background-color:#fff;  padding-left: 10%;}
.naviBar li { width:30%; float:left; text-align:center; }
.naviBar li a {display:block;padding:14px 0;}
.naviBar li a span.icon {display:block;margin:4px auto;position:relative;width:23px; height:20px;background:url("../images/common/naviIconSet.png") no-repeat; background-size:88px auto;  }
.naviBar li a em {font-size:10px;font-style:normal;display:block;color:#bbb;}
.naviBar li .navi_myvita  span.icon {background-position:0px 0;}
.naviBar li .navi_dash span.icon{background-position:-22px 0;}
.naviBar li .navi_alarm span.icon {background-position:-46px 0; }
.naviBar li .navi_more span.icon {background-position:-66px 0;}
.naviBar li .navi_alarm span.new:after,
.naviBar li .navi_more span.new:after {content:'';position:absolute;top:-2px;right:-2px;width:4px;height:4px;background:#ee0000;border-radius:50%;}


.naviBar li a.active em {color:#000;}
.naviBar li .navi_myvita.active  span.icon {background-position: -0px -20px;}
.naviBar li .navi_dash.active span.icon{background-position:-22px -20px;}
.naviBar li .navi_alarm.active span.icon {background-position:-46px -20px; }
.naviBar li .navi_more.active span.icon {background-position:-66px -18px;}


.naviBar2 { position:fixed; bottom:0;border-top:1px solid #eee; box-sizing:border-box; width:100%; min-width:320px; z-index:99; background-color:#fff;}
.naviBar2 li { width:25%; float:left; text-align:center; }
.naviBar2 li a {display:block;padding:14px 0;}
.naviBar2 li a span.icon {display:block;margin:4px auto;position:relative;width:32px; height:24px;background:url("../images/common/imageSet2.png") no-repeat; background-size:88px auto;  }
.naviBar2 li a em {font-size:10px;font-style:normal;display:block;color:#bbb;}
.naviBar2 li .navi_myvita  span.icon {background-position:0px 0;}
.naviBar2 li .navi_dash span.icon{background-position:-30px 0;}
.naviBar2 li .navi_alarm span.icon {background-position:-60px 0; }
.naviBar2 li .navi_more span.icon {background-position:-66px 0;}
.naviBar2 li .navi_alarm span.new:after,
.naviBar2 li .navi_more span.new:after {content:'';position:absolute;top:-2px;right:-2px;width:4px;height:4px;background:#ee0000;border-radius:50%;}


.naviBar2 li a.active em {color:#000;}
.naviBar2 li .navi_myvita.active  span.icon {background-position:-0px -20px;}
.naviBar2 li .navi_dash.active span.icon{background-position:-22px -20px;}
.naviBar2 li .navi_alarm.active span.icon {background-position:-46px -20px; }
.naviBar2 li .navi_more.active span.icon {background-position:-66px -18px;}


.naviBar .quick_alarm span { background-color:#f8474b; color:#fff; border-radius:12px; height:12px; line-height:12px; padding:2px 5px 1px; font-size:10px; vertical-align:middle; position:absolute; z-index:1; left:50%; top:1px; text-align:center; }
.naviBar:before {position: absolute;top: -2px;right: 0;left: 0;background: linear-gradient(to top, rgba(0,0,0,0.1), rgba(0,0,0,0));height: 2px;content: '';}
.naviBar:after  { content:""; display:block; height:0px; clear:both; }
.navi_color {background-color:#fff; width:50%; height:50px; color:#000; border-top-left-radius: 1em; border-top-right-radius: 1em; z-index:3; position:absolute; padding-left:40px; }
.navi_color2 {background-color:#C4C4C4; color:#fff; width:100%; height:50px; z-index:1; float:left;  position:absolute; border-top-right-radius:1em; }
.navi_color3 {background-color:#fff; width:100%; height:50px; color:#000; border-top-left-radius: 1em; border-top-right-radius: 1em; z-index:-1; position:absolute; border-top-right-radius:1em; border-top-left-radius:1em;  }
.navi_color4 {background-color:#c4c4c4; color:#fff; width:100%; height:50px; z-index:2;    position:absolute; padding-right:40px; border-top-left-radius: 1em; float:left;}
.navi_color5 {background-color:#FFD700; width:50%; height:50px; color:#000; border-top-right-radius: 1em; z-index:3; position:absolute; padding-left:40px;}
.navi_color6 {background-color:#FFD700; color:#fff; width:100%; height:50px; z-index:1; float:left;  }
.navi_color7 {background-color:#FFD700; width:100%; height:50px; color:#000; z-index:-2; position:absolute; padding-left:40px;}

.navi_color8 {background-color:#fff; width:50%; height:50px; color:#000; border-top-left-radius: 1em; border-top-right-radius: 1em; z-index:4; position:absolute;  margin-left:50%;}
.navi_color9 {background-color:#FFD700; color:#fff; width:50%; height:50px; z-index:1;   float:left;   }
.navi_color10 {background-color:#c4c4c4; color:#fff; width:90%; height:50px; z-index:2;    position:absolute; padding-right:40px; border-top-left-radius: 1em; float:left;}
.navi_color11 {background-color:#c4c4c4; color:#fff; width:56%; height:50px; z-index:2;    position:absolute; padding-right:40px; border-top-left-radius: 1em; float:left;}
.topp {text-align:right; padding-right:20px; padding-top:30px; font-size:1.4rem; color:#000; font-weight:600; Letter-spacing:-1px;}
.center_p {text-align:center;  padding-top:10px; font-size:1.2rem; font-weight:600;}
.bottom_p { text-align:center;  padding-top:10px; font-size:3rem; font-weight:600;}
.bottom_p2 { text-align:center;  font-size:2rem; font-weight:600; }
.p_padding { text-align:center; }
.p_padding2 { padding-left:50%; }
.p_padding3 { padding-right:50%; }
.padding_l {padding-left:5%; }
.padding_t {padding-top:5%;}
.p_color_g {color:#999999; font-style: normal; font-weight: normal; font-size: 12px; line-height: 128.91%;}
.card_gray {color: #aaa;}
.select_card {position: absolute;
width: 60px;
height: 18px;

background: #FFFFFF;
border: 1px solid #000000;
box-sizing: border-box;
border-radius: 5px;

}

.btn_pay {position: absolute;
width:90%;
background: #FFFFFF;
border: 1px solid #CECECE;
box-sizing: border-box;
border-radius: 10px;
margin-left:5%;
margin-top:7%;
}

.mainbox_1 a p_pay {
 border: 1px solid #000;

}

.m_pay {

	background-image:url(../images/common/m_pay.png);
	background-size:200px;
	width:200px;
	height:110px;
	background-repeat:no-repeat;
	margin:0 auto;
	margin-left:17%

}

.m_check {

	background-image:url(../images/common/mangocheck.png);
	background-size:200px;
	width:200px;
	height:110px;
	background-repeat:no-repeat;
	margin:0 auto;
	margin-left:17%

}


.paysistem {  background-image: url(../images/common/paysistem.png); background-size:92%; width:100%; height:100px; background-repeat: no-repeat; margin-left: 15px;
                            margin-top: 90px;}

.kakao {
    background-image: url(../images/common/kakao.png); background-size: 30px; width:50px; height: 50px; background-repeat: no-repeat;
                                background-position:50% 50%;

}

.kakao2 { border-radius:50%; background-color:#FEE102; width:50px; height:50px; margin-left: 21px; margin-top: 20px; float: left;}


.sendbox { width:100%; height:220px; background-color: #fff; position:fixed;bottom:0;left:0;right:0; padding: :20px; }

.sendbox2 { width:100%; height:100%; background-color: #fff; position:fixed;bottom:0;left:0;right:0; padding: :20px; overflow-x: scroll;}

.kakao_p {
    float:left; margin-left: 5%; font-size:1.1em; margin-top: 32px; font-weight:600;

}

.p_pay {font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 128.91%;
text-align: center;
color: #757575;
padding-top:3%;
padding-bottom:3%;
}

.serch{display:block;margin:4px auto;position:relative;width:32px; height:24px;background:url("../images/common/imageSet2.png") no-repeat; background-size:88px auto;

background-position: -30px -0px; }






#wrapper {/* min-height:100%;height:100%; */padding-bottom:80px;}
.container {margin:0;padding:0;}
.container .contentBox {padding:0 20px;}
.container .contentBox2 {padding:0 10px;}
.container .contentBox img {display: block;margin: 0 auto;width: 100%;}
.section-title {font-size:1.4rem;color:#000;}
.section-title .small {font-size:1.1rem;color:#666;}

.cont-title {color:#000;}
.infoTxt {color:#046fd9;padding:10px;}
.infoTxt2 {color:#d90404;padding:0;}
.checkTxt {background:#d4eaff;border-top:1px solid #046fd9!important;border-bottom:1px solid #046fd9!important;}


input[type="checkbox"] + label span { margin:0 8px 3px 0; display:inline-block; width:18px; height:18px; background:url("../images/common/check_off.png") no-repeat center center; background-size:18px 18px; cursor:pointer; vertical-align:middle; }
input[type="checkbox"]:checked + label span { background-image:url("../images/common/check_on.png"); }
input[type="radio"] { display:none; }
input[type="radio"] + label { margin-right:15px; }
input[type="radio"] + label span { margin:0 8px 3px 0; display:inline-block; width:18px; height:18px; background:url("../images/common/bg_radio_off.png") no-repeat center center; background-size:18px 18px; cursor:pointer; vertical-align:middle; }
input[type="radio"]:checked + label span { background-image:url("../images/common/bg_radio_on.png"); }

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], input[type=time] {
    display: inline-block;
    font-size: 16px;
    height: 36px;
    font-family: Arial;
    line-height: normal;
    color: #202020;
    border: none;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    font-weight:500;
    -webkit-appearance: none;
    appearance: none;
}

.card_c { float:left; margin-left:55%; margin-top: 5%; font-size:12px; text-align:center;}
.pdl5 { padding-left:5px;}
.wid100 { width:100%;}
.wid100p { width:100px;}
.clear { }

select {
    -webkit-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    width: 100%;
    height: 36px;
    padding: 0 30px 0 10px;
    font-size: 14px;
    color: #202020;
    line-height: 34px;
    background: url(../images/common/ico-arrow-sel.png) no-repeat calc(100% - 10px) 50% #fff;
    background-size: 7px auto;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
}

.mForm {background-color: #fff;}

.calendar-inp {position: relative;font-size: 0;border: 1px solid #ddd;margin:0 10px;background:#fff;padding-right:34px;margin-top:10px;}
.calendar-inp input[type=date], .calendar-inp input[type=tel], .calendar-inp input[type=text] {width: 50%;height: 34px;line-height: 34px;border: none;background: #fff;}
.calendar-inp input[type=date].start, .calendar-inp input[type=tel].start, .calendar-inp input[type=text].start {padding: 0 5px 0 10px;}
.calendar-inp input[type=date].end, .calendar-inp input[type=tel].end, .calendar-inp input[type=text].end {padding: 0 5px 0 15px;}
.calendar-inp .calendar-inp-inner {position:relative;}
.calendar-inp .calendar-inp-inner:before {content: '';display: block;position: absolute;top: 0;left: 50%;width: 14px;height: 34px;margin-left: -7px;background: url(../images/common/calendar-arrow.png) no-repeat 0 0;background-size: auto 34px;}
.calendar-inp .btn-search {text-align:center;position:absolute;right:0;top:0;background:#fff;border-left:1px solid #ddd;width:34px;bottom:0;}
.calendar-inp.type2 {padding-left:65px;}
.calendar-inp.type2 .sel {position:absolute;left:-1px;top:-1px;width:65px;}

.input-wrap {position: relative;font-size: 0;border: 1px solid #ddd;margin:10px;background:#fff;padding-right:34px;margin-top:10px;}
.input-wrap input[type=date], .input-wrap input[type=tel], .input-wrap input[type=text] {width: 100%;height: 34px;line-height: 34px;border: none;}
.input-wrap input[type=date].start, .input-wrap input[type=tel].start, .input-wrap input[type=text].start {padding: 0 5px 0 10px;}
.input-wrap input[type=date].end, .input-wrap input[type=tel].end, .input-wrap input[type=text].end {padding: 0 5px 0 15px;}
.input-wrap .input-wrap-inner {position:relative;}
.input-wrap .btn-search {text-align:center;position:absolute;right:0;top:0;background:#fff;border-left:1px solid #ddd;width:34px;bottom:0;}

.input-wrap-btn {display: -webkit-flex;display: -ms-flex;display: flex;flex-direction: row;}
.txt-input {position: relative;width: 100%;display: -webkit-flex;display: -ms-flex;display: flex;flex-direction: row;background-color: #f1f2f4;border: 1px solid #f1f2f4;border-radius: 3px;height: 36px;}
.input-delivery-period .txt-input {flex-grow: 0;flex-shrink: 1;}
.input-wrap-btn a.btn, .input-wrap-btn button.btn {flex-shrink: 0;flex-grow: 1;flex-basis:80px;white-space: nowrap;padding: 0 10px;}
.input-text-wrap {display: inline-block;
    font-size: 14px;
    height: 36px;
    font-family: Arial;
    line-height: normal;
    color: #202020;
    border: none;
    padding: 0 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #f1f2f4;
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #f1f2f4;}
.input-text {line-height:36px;color:#666;}

.list_d2 {float:left; width:22%; height:40px; border:1px solid #ccc;  text-align:center; padding-top:2%; margin-left:1px;}
.list_d2:hover { background-color:#ccc;}

.list_d1 {float:left; width:22%; height:40px; border:1px solid #ccc; margin-left:5%; text-align:center; padding-top:2%;}
.list_d1:link { background-color:#ccc;}
.list_d1:active { background-color:#ccc;}
.list_d1:hover { background-color:#ccc;}



/* 테이블 스타일 */
.table {  width: 100%;  margin-bottom: 1rem;  color: #212529;  border-top:1px solid #dee2e6;}
.table th, .table td {  padding: 0.75rem;  vertical-align: top;  text-align:center;  border-bottom: 1px solid #dee2e6;}
.table thead th {  vertical-align: middle;  border-bottom: 2px solid #dee2e6;}
.table tbody + tbody {  border-top: 2px solid #dee2e6;}
.table-responsive {  display: block;  width: 100%;  overflow-x: auto;  -webkit-overflow-scrolling: touch;}
.table-responsive .table th, .table-responsive  .table td {white-space: nowrap;}
.table-responsive > .table-bordered {  border: 0;}
.noData {color:#999;}
.noData .noDataInner {padding:10px;line-height: 26px;}
.noData .noDataInner span{vertical-align: middle;color:#cb2727}
.noData .noDataInner:after {content:'';display:block;clear:both;}
.table td .bage {border-radius: 2px;display:inline-block;color: #fff;padding: 1px 3px;font-weight: 600;min-width: 62px;text-align: center;}
.table td .bage.type1 {background: #bbb;}
.table td .bage.type2 {background: #a5d2ff;}
.table td .bage.type3 {background: #81d6eb;}
.table td .bage.type4 {background: #9592eb;}
.table td .bage.type5 {background: #4984f7;}
.table td .bage.type6 {background: #f79449;}
.table .fixT {box-shadow: rgb(0 0 0 / 20%) 0px 1px 2px;}

a.detailInfo {display:block;position:relative;text-decoration:underline;}
a.detailInfo:after {content:"\f29c";font-family:FontAwesome;padding-left:5px;}

/* pagination */

.pagination {text-align: right;padding:0 10px;transition: .3s opacity;transform: translate3d(0,0,0); z-index: 10;}
.pagination-bullet {width: 8px;height: 8px;display: inline-block;border-radius: 50%;background: #000;opacity: .2;}
.pagination-bullet-active {width: 8px;height: 8px;display: inline-block;border-radius: 50%;background: #046fd9;opacity: 1;}
.pagination-before, .pagination-next {color:#046fd9!important;display: inline-block;}




.detailInfoTxt {}
.detailInfoTxt li {position:relative;padding:5px;padding-left:15px;word-break:keep-all;}
.detailInfoTxt li .num {position:absolute;left:0;top:5px;font-weight:600;}
.detailInfoTxt .impTxt {color:#ee0000;font-weight:600;}
.helpInfoWrap {color:#666;}
.helpInfoTxt li {position:relative;padding:5px;padding-left:66px;word-break:keep-all;color:#666;}
.helpInfoTxt li .bage {position:absolute;border-radius:2px;color:#fff;padding:1px 3px;left:0;top:5px;font-weight:600;min-width:62px;text-align:center;}
.helpInfoTxt li .type1 {background:#bbb;}
.helpInfoTxt li .type2 {background:#a5d2ff;}
.helpInfoTxt li .type3 {background:#81d6eb;}
.helpInfoTxt li .type4 {background:#9592eb;}
.helpInfoTxt li .type5 {background:#4984f7;}
.helpInfoTxt li .type6 {background:#f79449;}
.bage-type6 {border-radius:2px;color:#fff;background:#f79449;display:inline-block;padding:1px 4px;font-weight:600;min-width:65px;text-align:center;}
.noMsgArea {position: relative;height: 100%;min-height: 630px;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}
.none_page {position: absolute;left: 50%;text-align: center;margin-top: 126px;-webkit-transform: translateX(-50%);transform: translateX(-50%);   top: 0;}
.none_page .msgIcon {color:#999}
.none_page .msgCopy {color: #999;font-weight: 300;font-size:1.4rem;padding: 20px 0;}

/* 도움말 */
.help_list { margin:10px 0; border-bottom:1px solid #ddd;border-top:1px solid #ddd; }
.help_list .reply_stanby { margin-right:10px; }
.help_list .reply_complete { margin-right:10px; color:#f8474b; }
.help_list .reply_title { margin-right:10px; color:#222; }
.help_list dt { border-top:1px solid #ddd; font-size:1.4rem; }
.help_list dt:first-child { border-top:0; }
.help_list dt a { display:block; padding:12px 30px 12px 10px; box-sizing:border-box; width:100%; position:relative; }
.help_list dt a:after { content: "\f107"; width:14px; height:24px; position:absolute; top:10px; right:10px;font-family:FontAwesome;font-size: 26px;color:#bbb;}
.help_list dt.title_on a:after { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg); }
.help_list dd { display:none; color:#666; line-height:160%; }
.help_list dd:first-child {display:block;}
.help_list dd .contents { padding:10px;background:#f9f9f9;}

/* 알림 */
.alarm_list { margin-bottom:10px;}
.alarm_list li { padding:10px; border:1px solid #eee;position:relative;transition:all .3s; border-radius:20px; margin-bottom:5%;}
.alarm_list .alarm_title { font-size:16px; font-weight:bold; }
.alarm_list .alarm_text { font-size:13px; color:#666; margin-top:7px; }
.alarm_list .alarm_date { font-size:12px; color:#999; margin-top:2px; }
.alarm_list .noRead {background:#f4faff;}
.alarm_list li.editMod {padding-left: 54px;}
.alarm_list li.editMod .checkbox {position:absolute;left:5px;top:50%;margin-top:-12px;width: 24px;height: 24px;}

.down-menu {}
.down-menu {display:none;background:#fff;padding:0;right:10px;position:absolute;width: 80px;z-index:1000;border-bottom:1px solid #ddd;box-shadow:0 2px 8px rgba(0, 0, 0, 0.125)}
.down-menu ul:after {display:block;visibility:hidden;clear:both;content:""}
.down-menu li {}
.down-menu li a {text-align:center;display:block;color:#555;padding:10px;}

.setting_wrap li { position:relative; padding:13px 15px 12px; font-size:15px; white-space:nowrap; border-bottom:1px solid #eee; }
.setting_wrap .btn_toggle input[type="checkbox"] {display:none;}
.setting_wrap .btn_toggle input[type="checkbox"] + label span { margin:0; position:absolute; right:10px; top:10px; display:inline-block; width:50px; height:25px; background:url("../images/common/btn_setting_off.png") no-repeat 0 0; background-size:50px 25px; cursor:pointer; }
.setting_wrap .btn_toggle input[type="checkbox"]:checked + label span { background-image:url("../images/common/btn_setting_on.png"); }
.setting_wrap .link_area { padding:0; }
.setting_wrap .link_area a { display:block; padding:12px 10px; }
.setting_wrap .link_area a:after { content: "\f105"; font-family:FontAwesome;font-size: 26px;color: #bbb;position: absolute;top: 7px;right: 10px;}
.setting_wrap .text_ver { position:absolute; top:15px; right:15px; color:#666; font-size:13px; }



/* checkbox */
.checkbox {font-size: 0;vertical-align: middle;position: relative;}
.checkbox input {-webkit-appearance: none;appearance: none;border: none;width: 24px;height: 24px;background: url(../images/common/check_off.png) 0 0 no-repeat;background-size: 24px;   position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.checkbox label {display:block;padding-left: 32px;font-size: 15px;color: #202020;line-height: 24px;vertical-align: top;}
.checkbox input:checked {background: url(../images/common/check_on.png) 0 0 no-repeat; background-size: 24px; }

.checkboxWrap {position: relative;border: 1px solid #ccd5da;padding:0 0 10px 10px;border-radius:3px;}
.checkboxWrap .btn_tool {position:absolute;right:0;top:0;width:30px;line-height:46px;font-size:26px;background:transparent;bottom:0;color:#666;}

.csCenter {font-size:1.6rem;}
.csCenter .impTxt {font-size:2rem;color:#046fd9;padding:10px;}
.com_info li {padding:3px 10px;word-break:keep-all;}

.padding-inner {margin: 12px auto;background-color: #fff;border:0px solid #ddd;padding:0px;}
.content-title {position:relative;}
.content-title h2 {color: #202020;font-size: 16px;font-weight: 700;display: inline-block;}
.content-title h3 {font-size: 14px;margin-bottom: 15px;position:relative;}
.content-title .btn-tool {position:absolute;right:10px;top:10px;background:transparent;color:#d02b2b;font-size: 2rem;}
.sms-setting-content {margin-bottom: 20px;}
.sms-setting-content .input-type-auto {padding-left:100px;position:relative;}
.sms-setting-content .input-type-auto .auto-text {position:absolute;left:0;line-height:36px;padding:0 10px;box-sizing:border-box;font-weight:600;font-size:1.6rem;}
.sms-setting-content.flex {display: flex;justify-content: flex-start;}



.acc-head {border-bottom: 1px solid #efefef;padding-left: 18px;position: relative;}
.acc-item > .acc-head h2 {height: 46px;line-height: 46px;}
.acc-cont {padding:20px 10px 0 10px;}
.necessary {color: #0383d8;font-size: 16px;line-height: 16px;vertical-align: middle;}
.alert-txt {color:#d52812;font-size:12px;}


.content-title h3.board-title {padding-right:20px;font-size:16px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.content-title h3.board-title:after {content: "\f105";font-family: FontAwesome;position:absolute;right:0;top:-4px;font-size:24px;}
.board-content {overflow: hidden; text-overflow: ellipsis;white-space: normal;line-height: 1.3em;height: 2.4em;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.board-writer {color:#666;font-size:1.2rem;}
.board-date {color:#666;font-size:1.2rem;}
.boarimg {background:#f8f8f8 url(../images/common/vita_logo.png) no-repeat center center;background-size:161px auto;min-height:320px;}

.boardDetailWrap {padding:10px 0;}
.boardDetailTitle {font-size:1.6rem;padding:10px;}
.boardDetailInfo {color:#666;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:10px;}
.boardDetailContents {padding:10px;}

.board_list2 {border-top:1px solid #ddd;}
.board_list2 li {border-bottom:1px solid #ddd;padding:10px;}
.board_list2 .board_inner {position:relative;padding-right:60px;}
.board_list2 .board_inner .board-title2 {font-size:16px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.board_list2 .board_inner .viewTxt {position:absolute;right:0;top:2px;color:#666;}


.faq_list { margin:10px 0; border-bottom:1px solid #ddd;border-top:1px solid #ddd; }
.faq_list .reply_stanby { margin-right:10px; }
.faq_list .reply_complete { margin-right:10px; color:#f8474b; }
.faq_list .reply_title { margin-right:10px; color:#222; }
.faq_list dt { border-top:1px solid #ddd; font-size:1.4rem;position:relative;}
.faq_list dt:first-child { border-top:0; }
.faq_list dt a { display:block; padding:15px 30px 15px 10px;padding-left:40px;box-sizing:border-box; width:100%; position:relative; }
.faq_list dt a:after { content: "\f107"; width:14px; height:24px; position:absolute; top:10px; right:10px;font-family:FontAwesome;font-size: 26px;color:#bbb;}
.faq_list dt.title_on a:after { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg); }
.faq_list dd { display:none; color:#666; line-height:160%; position:relative;}
.faq_list dd:first-child {display:block;}
.faq_list dd .contents { padding:10px;padding-left:40px;background:#f9f9f9;}
.faq_list span.qLabel {position:absolute;left:10px;top:14px;display:inline-block;background:#046fd9;color:#fff;border-radius:50%;width:24px;height:24px;line-height:24px;text-align:center;}
.faq_list span.aLabel {position:absolute;left:10px;top:14px;display:inline-block;background:#dbedff;color:#046fd9;;border-radius:50%;width:24px;height:24px;line-height:24px;text-align:center;}

.companyPro_list { margin:10px 0; border-bottom:1px solid #ddd;border-top:1px solid #ddd; }
.companyPro_list dt { border-top:1px solid #ddd; font-size:1.4rem;position:relative;}
.companyPro_list dt:first-child { border-top:0; }
.companyPro_list dt a { display:block; padding:15px 30px 15px 10px;box-sizing:border-box; width:100%; position:relative; }
.companyPro_list dt a:after { content: "\f107"; width:14px; height:24px; position:absolute; top:10px; right:10px;font-family:FontAwesome;font-size: 26px;color:#bbb;}
.companyPro_list dt.title_on a:after { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg); }
.companyPro_list dd { display:none; color:#666; line-height:160%; position:relative;}
.companyPro_list dd:first-child {display:block;}
.companyPro_list dd .contents { padding:10px;background:#f9f9f9;}
.companyPro_list  .catDepth2_list li {padding:5px 0;}

.ruleList li {padding:10px 0;}

.layer_popup { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1001; }
.layer_popup2 { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1001; }
.layer_popup03 { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1001; }
.layer_popup .bg_dimmed { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; filter:alpha(opacity=60); }
.layer_popup02 { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:101; }
.layer_popup02 .bg_dimmed { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; filter:alpha(opacity=60); }
.pop_layer { display:none; position:absolute; top:50%; left:50%; z-index:10; visibility: visible;
    height: 60vh; }
.pop_layer .pop_text {word-break:keep-all;width:300px; height:auto;font-size:1.2rem;border-top-left-radius:4px; border-top-right-radius:4px; background-color:#fff; padding:25px 10px; box-sizing:border-box; text-align:center; }
.pop_layer .pop_layer_title {padding:0 0 10px 15px;border-bottom:1px solid #dadada;font-weight:bold;}
.pop_layer .recommend_list_exist {width:320px; height:auto;  border-radius:4px 4px 0 0;background-color:#fff; padding:20px 0; box-sizing:border-box; }
.pop_layer02 { display:none; position:absolute; top:50%; left:0; z-index:10;margin:5px; }
.pop_layer02 .pop_wrap { width:100%; height:auto;  border-radius:4px;background-color:#fff; padding:20px 0; box-sizing:border-box; text-align:center; }
.pop_layer02 .pop_wrap .headline {font-size:15px;margin:0 0 10px 0;padding:0px 0 0 0;position:relative;}
.pop_layer02 .pop_wrap .headline a.btn_pop_close {border:0px solid #000;text-indent:-9999px;display: block;position: absolute;top:-10px;right:10px;background: url(../images/main/btn_pop_close.png) 5px 5px no-repeat;background-size: 15px 15px;width: 24px;height: 24px;}
.pop_layer02 .pop_incentive {width:100%;}
.pop_layer02 .pop_incentive th,
.pop_layer02 .pop_incentive td {border-bottom:0px solid #ddd;font-size:12px;padding:0px 0;}
.pop_layer02 .pop_incentive02 {width:100%;}
.pop_layer02 .pop_incentive02 th,
.pop_layer02 .pop_incentive02 td {border-bottom:0px solid #ddd;font-size:12px;padding:0px 0;}
.btn_area_pop {background:#fff;text-align:center;border-bottom-left-radius:4px; border-bottom-right-radius:4px;border-top:1px solid #eee;}
.btn_area_pop.type1 a { display:inline-block; color:#046fd9; font-size:16px; text-align:center;padding:15px 0;width:100%;}
.btn_area_pop.type2 a { display:inline-block; color:#046fd9; font-size:16px; text-align:center;padding:15px 0;width:50%;}
.btn_area_pop.type2 a:first-child {border-right:1px solid #eee;color:#666;}

.btn_area_pop span { width:50%; float:left; box-sizing:border-box; }
.btn_area_pop span a { border-bottom-left-radius:0; border-bottom-right-radius:4px; }
.btn_area_pop span:first-child a { border-bottom-left-radius:4px; border-bottom-right-radius:0; }
.btn_area_pop:after { content:""; display:block; height:0px; clear:both; }
.tab_content_title {text-align:center;font-weight:bold;}
.tab_content_title span {display:block;width:45%;background:#fff;padding:4px 0;font-size:14px;}
.tab_content_title span.title01 {color:#d43337;}
.tab_content_title span.title02 {color:#a04d21;}


.addFileWrap {position:relative;font-size: 14px;background-color: #f1f2f4;height: 36px;padding: 0 12px;padding-right:32px;width: 100%;box-sizing: border-box;border: 1px solid #f1f2f4;border-radius: 3px;}
.addFileWrap .addFileName {font-size: 14px;line-height: 36px;color:#202020}
.addFileWrap .addFileInput {position: absolute;top: 0;right: 0;opacity: 0;   z-index: 2;width:30px;height: 36px;}
.addFileWrap .btn_add {position:absolute;right:0;top:0;bottom:0;background:transparent;line-height:36px;width:30px;}

/* 로그인& 회원가입 */
.login_header {position: relative;box-sizing: border-box;padding: 90px 15px 60px;background-color: #fff;}
.h_logo {display: block;margin: 0 auto;color: transparent;font-size: 15px; background:url(../images/common/mango_logo.png) no-repeat 0 0;background-size:160px auto; width:160px;	height:97px;}
.id_form {padding: 8px 15px 0;background-color: #fff; color: #000;}
.input_row {position: relative;overflow: hidden;margin: 0 0 6px;padding: 5px 20px 5px 11px; border: 0; background: #F6F7F9; border-radius: 10px; color: #000;}
.input_row2 {position: relative;overflow: hidden;margin: 0 0 6px;padding: 5px 20px 5px 11px; border: 0; background: #F6F7F9; border-radius: 10px; color: #000; margin-left: 5%; margin-right: 5%;}
.input_box {display: block;overflow: hidden; background: #F6F7F9; color: #000;}
.input_box .btn-tool {display:none;position:absolute;right:0;top:50%;margin-top:-14px;z-index:10;}
.input_box .btn-tool button {padding:0 5px;background:transparent;color:#999;}
.view_on .btn-tool{display:block;}
.id_form .input_box input[type=text] {border:0;focus:0;outline: 0; color: #000; background:#F6F7F9;}
.id_form .input_box input[type=password]{border:0;focus:0;outline: 0; color: #000; background:#F6F7F9; font-size:16px;}
.int {font-size: 12px;line-height: 16px;position: relative;z-index: 9;width: 100%;height: 16px;padding: 11px 0 8px;color: #000;border: none;background: #fff;}
.btn_login .btn_global {width:100%}
.btn_global {-webkit-transition: all 0.4s;-o-transition: all 0.4s;-moz-transition: all 0.4s;    transition: all 0.4s;position: relative;display: block;width: 100%;height: 54px;margin: 6px 0 5px;padding: 15px 0 18px;font-size: 18px;font-weight: 400;cursor: pointer;text-align: center;color:#046fd9;border:1px solid #B5B5B5;border-radius: 10px;background-color: #fff;-webkit-appearance: none; color:#A6A6A6; font-weight: 600;}
.btn_global.on {background-color: #FFD700;border:1px solid #FFD700;color:#fff;font-weight:600; border-radius: 10px; color:#000;}
.find_info {font-size: 1.1rem;padding-top: 12px;text-align: center;color: #8e8e8e; }
.find_info2 {font-size: 1.2rem;padding-top: 80px;text-align: center;color: #8e8e8e; }
.memberBox {text-align:center;padding-top:80px;}
.memberBox .finIcon {color:#76c2d4;}
.memberBox .finIcon span {font-size:6rem;}
.memberBox .finCopy {font-weight:800;font-size:2rem;padding:20px 0;}
.memberBox .finCopy2 {font-weight:300;font-size:1.4rem;color:#666;padding:20px 0;}
.indexCsInfo {padding:40px 0;}
.text-xs {color:#666;font-size:1.2rem;}
.text-sm {color:#000;font-size:1.6rem;font-weight:600;}
.text-lg {color:#000;font-weight:600;font-size:3.6rem;}
.arrow2 {background:url(../images/common/arrow2.png) 0 0 no-repeat; background-size:18px auto;  height:20px;  margin-top:1px; background-position:right; }
.arrow4 {vertical-align: middle;}
.arrow3 {padding-right:20px; font-weight: 400; font-size:1.4rem;}
.idfind {color:#fff; }
.centerbox {width:100%; height:23%; background-color:#FFD700; position:absolute; margin-left: 0px;margin-right: 0px;}
.mainbox_1 {width:100%; height:20%; display: block; text-overflow: ellipsis;}
.checks {position: relative; margin-left: 10px;}
.checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; margin-left: 10px;}
.checks input[type="radio"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; width:95%; }
.checks input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: 9px; width: 21px; height: 21px; text-align: center; background: #fafafa; border: 1px solid #cacece; border-radius: 100%;  }
.checks input[type="radio"] + label:active:before,
.checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }
.checks input[type="radio"]:checked + label:before {  border-color: #d8dbde; }
.checks input[type="radio"]:checked + label:after { content: ''; position: absolute; top:51%; left: 4px;  margin-top:-4px;  width: 13px; height: 13px; background: #FFD700; border-radius: 100%;  }
.checks top {top:20px;}

.checks:hover {
				background:#ededed;
}

.txtover {text-overflow: ellipsis; overflow: hidden;   white-space: nowrap; word-wrap: break-word;
 -webkit-line-clamp: 1; width: 200px;}

.checksflo {float:left; text-overflow: ellipsis;}
.checksflo2 {float:right; padding-top:7px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 128.91%; color:#F1003A; text-overflow: ellipsis;}
.list_point{  width:100%; height:50px;}
.list_point active{ background:#999999; width:100%; height:40px;}
.pay_card {
width: 100%;
height: 80px;

background: #FFFFFF;
border: 1px solid #AAAAAA;
box-sizing: border-box;
border-radius: 10px;
margin-top:30%;

}

.pay_card_sign {
width: 100%;
height: 150px;

background: #FFFFFF;
border: 1px solid #AAAAAA;
box-sizing: border-box;
border-radius: 10px;
margin-top:30%;

}


.day_m {

    float:left;
    border:1px solid #e9e9e9;
    background-color: #fff;
    color:#000;
    width:70px;
    text-align: center;
}

.pay_card2 {
width: 100%;
height: 80px;

background: #FFFFFF;
border: 1px solid #AAAAAA;
box-sizing: border-box;
border-radius: 10px;
margin-top:5%;

}
.card_img {

	width: 40%;
	height: 40%;
	margin-top:2%;
}

.card_img2 {

	width: 100%;
	height: 100%;

}

.card_img3 {

	width: 70%;
	height: 70%;

}

.card_img4 {

	width: 130%;
	height: 130%;
	margin-top:2%;
}


.card_img5 {

	width: 100%;
	height: 100%;
	padding-bottom:70%;
}

.card_img6 {

	width: 40%;
	height: 40%;
	padding-bottom:70%;
}



.pay_card4 {

	 position:absolue; width:50%;


}

.pay_card_on {float:left;}
.pay_card_on:hover {

	border:2px solid #FFD700;
	    cursor: pointer;
}


.pay_card5 {

	float:left; margin-left:5%; position:absolue; width:30%;


}


.pay_card6 {

	float:left; margin-left:5%; position:absolue; width:30%;


}

.pay_card3 {
width: 50%;
height: 80px;

background: #FFFFFF;
box-sizing: border-box;
border-radius: 10px;
margin-top:10%;
float:left;
}


.top_box {
	width:100%;
	height:214px;
	background-color:#FFD700;
	z-index:-1;
	float:left;


}

.z_box5{ position: absolute;
		 width: 90%;
		 height: 90%;
		 background: #FFFFFF;
		 border-radius: 20px;
		 z-index:1;
		 margin-top:10px;
		 margin-left:20px;
		 margin-bottom:20px;
}
.z_box5_mg {
margin-top:10%; margin-left:10px;
}

.z_box5_line {
border-bottom:1px solid #e8e8e8; margin-top:130px; width:90%; margin-left:5%;
}

.z_box1{ position: absolute;
		 width: 90%;
		 height: 430px;
		 background: #FFFFFF;
		 box-shadow: 0px 2px 4px 2px rgba(218, 218, 218, 0.25);
		 border-radius: 20px;
		 z-index:1;
		 margin-top:75px;
		 margin-left:20px;
}



.z_box1_2{ position: absolute;
		 width: 90%;
		 height: 500px;
		 background: #FFFFFF;
		 box-shadow: 0px 2px 4px 2px rgba(218, 218, 218, 0.25);
		 border-radius: 20px;
		 z-index:1;
		 margin-top:125px;
		 margin-left:20px;
}



.z_box1_1{ position: absolute;
		 width: 90%;
		 height: 500px;
		 background: #FFFFFF;
		 box-shadow: 0px 2px 4px 2px rgba(218, 218, 218, 0.25);
		 border-radius: 20px;
		 z-index:1;
		 margin-top:125px;
		 margin-left:20px;
}


.z_boxt{ position: absolute;
		 width: 90%;
		 height: 400px;
		 background: #FFFFFF;
		 border: 1px solid #e9e9e9;
		 border-radius: 20px;
		 z-index:1;
		 margin-top:22px;
		 margin-left:20px;
}

.z_box2{ position: absolute;
		 width: 90%;
		 height: 270px;
		 background: #FFFFFF;
		 box-shadow: 0px 2px 4px 2px rgba(218, 218, 218, 0.25);
		 border-radius: 20px;
		 z-index:1;
		 margin-top:125px;
		 margin-left:20px;
}

.z_box2_line {

border-bottom:1px solid #e8e8e8; margin-top:130px; width:90%; margin-left:5%;
}


.z_box1_mg {

margin-top:24%; margin-left:20px;
}

.z_box1_mg3 {


margin-top:12%; margin-left:20px;
}

.z_box1_mg2 {border-bottom:1px solid #e8e8e8; margin-top:150px; width:90%; margin-left:5%;}

.z_box1_left {font-family: Noto Sans KR;
			  font-style: normal;
			  font-weight: 600;
			  font-size: 22px;
			  line-height: 128.91%;
			  letter-spacing: 0.05em; float:left;
}

.z_box1_p1 {float:left; margin-left:5%;
						   font-family: Noto Sans KR;
						   font-style: normal;
                           font-weight: bold;
						   font-size: 13px;
						   line-height: 128.91%;
						   color:#888888;}

.z_box1_p2 {float:left; margin-left:5%;
						   font-family: Noto Sans KR;
						   font-style: normal;
                           font-weight: bold;
						   font-size: 13px;
						   line-height: 128.91%;
						   color:#888888;
						   margin-top:2%;}


.z_box1_p3 {float:left; text-align:right; margin-left:40%;
						   font-family: Noto Sans KR;
						   font-style: normal;
                           font-weight: bold;
						   font-size: 13px;
						   line-height: 128.91%;
						   color:#4B4B4B;

}


.z_box1_p9 {float:right; text-align:right; margin-right:6%;
						   font-family: Noto Sans KR;
						   font-style: normal;
                           font-weight: bold;
						   font-size: 13px;
						   line-height: 128.91%;
						   color:#4B4B4B;


}


.z_box1_p8 {float:right;  margin-right:5%;
						   font-family: Noto Sans KR;
						   font-style: normal;
                           font-weight: bold;
						   font-size: 13px;
						   line-height: 128.91%;
						   color:#4B4B4B;
                            text-align: center;
                            vertical-align: middle;
                            padding-top: 2%;
                         width:64px;
                        height: 30px;
                        background-color: #e9e9e9;
                        border-radius: 15px;
                        padding-bottom: 16px;
}



.z_box1_p4 {
			float:left; margin-left:6%;
			font-family: Noto Sans KR;
			font-style: normal;
            font-weight: bold;
			font-size: 20px;
			line-height: 128.91%;
			color:#3b3b3b;

}

.z_box1_p5 {
				float:right; text-align:right; margin-right:5%;
				font-family: Noto Sans KR;
				font-style: normal;
                font-weight: bold;
				font-size: 20px;
				line-height: 128.91%;
				color:#3b3b3b;

}

.z_box_p6 {
float:left; margin-left:5%;
						   font-family: Noto Sans KR;
						   font-style: normal;
                           font-weight: bold;
						   font-size: 20px;
						   line-height: 128.91%;
						   color:#3b3b3b;
}

.z_box_p7 {
float:right; text-align:right; margin-right:5%;
						   font-family: Noto Sans KR;
						   font-style: normal;
                           font-weight: bold;
						   font-size: 20px;
						   line-height: 128.91%;
						   color:#3b3b3b;

}
.z_mango_img {

position: absolute;
						z-index:2;
						background-image:url(../images/common/mango_logo3.png);
						width: 138px;
						height: 100px;
						background-size:138px;
						background-repeat:no-repeat;
						margin-top:40px; margin-left:33%;
}

.z_mango2_img {

position: relative;
						z-index:2;
						background-image:url(../images/common/mango_logo.png);
						width: 138px;
						height: 100px;
						background-size:138px;
						background-repeat:no-repeat;
						margin-top:20px; margin-left:33%;
}


.z_box1_btn { position: absolute;
			  width: 98px;
			  height: 27px;
			  background: #EFEFEF;
			  border-radius: 15px; float:left; margin-left:26%; margin-top:0.5%;
}


.z_box1_p { font-style: normal;
			font-weight: 600;
			font-size: 12px;
			vertical-align:middle;
			float:left;
			margin-left:10%;
			margin-top:3%;
}

.z_box1_img { width:13px; height:13px; margin-bottom:1%;


}

.z_box1_line {

border-bottom:1px solid #e8e8e8; margin-top:130px; width:90%; margin-left:5%;
}


.z_box1_line3 {

border-bottom:1px solid #e8e8e8; margin-top:70px; width:90%; margin-left:5%;
}


.z_box1_line3t {

border-bottom:1px solid #e8e8e8; margin-top:90px; width:90%; margin-left:5%;
}

.z_box1_line2 {

border-bottom:1px solid #e8e8e8; margin-top:30px; width:90%; margin-left:5%;
}



.hidden { display:none; }
.overlay       { position:fixed; z-index:999; opacity:1; visibility:visible; top:0; bottom:0; left:0; right:0; background:rgba(0, 0, 0, 0.7); transition:opacity 0.4s; }
.overlay:target { opacity:1; visibility:visible; }

.overlay--contents_full { position:fixed; bottom:0; width:100%; padding:8px; margin:0 auto; text-align:center; background:#fff; border-radius:30px 30px 0 0; }



.btn_pay:hover {
   border: 2px solid #FFD700;
   }

.btn_pay:active {
    border: 2px solid #FFD700;
}

.pay_card:hover {
   border: 2px solid #FFD700;
   }

.pay_card:active {
   border: 2px solid #FFD700;
   }

.pay_card2:hover {
   border: 2px solid #FFD700;
   }

.pay_card2:active {
   border: 2px solid #FFD700;
   }


.cld {


   width:  90%;
   height: 1px;
   background-color: #DEDEDE; margin-left: 5%;

}


.pay_p1 {

padding-top:10%;
height: 56px;

font-family: Noto Sans KR;
font-style: normal;
font-weight: bold;
font-size: 22px;
line-height: 128.91%;
/* or 28px */

align-items: flex-end;
letter-spacing: -0.05em;

color: #FFB800;}

.card_hp {
width: 82px;
height: 29px;

background: #FFFFFF;
border: 1px solid #B3B3B3;
box-sizing: border-box;
border-radius: 20px;
float: right;

text-align: center;
padding-top: 1%;
}

.under_line { border-bottom:1px solid #000;}

.formToggleTst input[type=checkbox] + label {
  background-color: #fff;

}

.formToggleTst input[type=checkbox]:checked + label {
  background-color: gray;

}
#canvas { /* just for test, you can change by yourself */
  width: 325px;
  height: 325px;
  background: red;
}

.cara_img_cover {
position: absolute;
width: 60px;
height: 60px;

background: #FFFFFF;
border: 1px solid #E2E2E2;
box-sizing: border-box;
border-radius: 30px;
margin-left: 5%;
margin-top: 2%;
float:left;
}

/* 대시보드 */
.card-wrap {padding:0 0;}
.card {padding:0 10px;background:#fff;border-top:1px solid #ddd;}
.card .card-header {padding:10px 0;position:relative;}
.card .card-header {line-height:32px;}
.card .card-header .btn-help.fixed {position:absolute;right:0;top:5px;z-index:10;}
.card .card-header .card-title {}
.card .card-header .period {color:#666;}
.card .card-body {}
.card .card-body .card-body-inner {background:#eee;min-height:calc(50vh + 60px);}



/* 타이틀 */
.container {position:relative}
.title_area {position:relative;background:#fff;z-index:8}
#container_title {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.pg_tit, .m-pg-tit {font-size:1.7rem;margin:0;background:#fff;padding:10px;line-height:25px;border-bottom:1px solid #ddd}
#con_lf {position:relative}

/* 에러 */
.errorBox {text-align:center;padding-top:80px;}
.errorBox .errorIcon {color:#e62b2b;}
.errorBox .errorIcon span {font-size:6rem;}
.errorBox .errorCopy {color:#999;font-weight:300;font-size:1.4rem;padding:20px 0;}
.errorBox .errorCopy em {color:#e62b2b;font-style:normal}
.errorBox button {background:#ddd;border-radius:4px;padding:8px 15px;}

/* pagging */
.btnPageZone {margin:10px 0;display:flex;-ms-flex-pack: center !important;justify-content: center !important;}
.btnPageZone button.pre_btn {margin-right:0;}
.btnPageZone button {position:relative;}
.btnPageZone button:after {font-family:FontAwesome;}
.btnPageZone button.pre_btn:after {content:"\f104";}
.btnPageZone button.pre_end_btn:after {content:"\f100";}
.btnPageZone button.next_btn:after {content:"\f105";}
.btnPageZone button.next_end_btn:after {content:"\f101";}
.btnPageZone span {display: inline-flex;height: auto;}
.btnPageZone span a,
.btnPageZone button {width:auto;font-family: "맑은 고딕",Malgun Gothic,"굴림",Gulim,arial,sans-serif;height:auto;padding:0.25rem 0.5rem;line-height:1.2;position: relative;display: block; margin-left: -1px;color: #555f;background: #fff;border: 1px solid #dee2e6;}
.btnPageZone span a:hover,
.btnPageZone button:hover,
.btnPageZone span.current + span a:hover {z-index: 2;color: #0056b3;text-decoration: none;background-color: #e9ecef;border-color: #dee2e6;}
.btnPageZone span.current a {font-weight:300;z-index: 3;color: #fff;background-color: #007bff;border-color: #007bff;}
.btnPageZone span.current + span a {background: #fff;}
.btnPageZone button:first-child {border-top-left-radius: 0.2rem;border-bottom-left-radius: 0.2rem;}
.btnPageZone button:last-child {border-top-right-radius: 0.2rem;border-bottom-right-radius: 0.2rem}

@media all and (max-width:768px) {

}

@media all and (min-width:461px) and (max-width:729px) {

}

@media all and (min-width:730px) {

}



/* loading */
.loading {
	width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: flex;
   justify-content:center;
   align-items:center;
   background: rgba(0,0,0,.1);
   z-index: 99999;
   text-align: center;
}
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner .spinTxt {
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 80px;
    text-align: center;
    font-size: 6px;
    color: rgba(0, 108, 255, 1);
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 14px;
  border-radius: 20%;
  background: #006cff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.hide {display:none;}









/* 대시보드 */
.card-wrap {
    padding: 0 0;
}

.card {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border-radius: .6rem;
	overflow:hidden;
}
.card .card-header {
    padding:15px;
    position: relative;
}

.card .card-title {
    font-size:16px;
}

.card .card-header .btn-help.fixed {
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 10;
}

.card .card-header .card-title {
}

.card .card-header .period {
    color: #666;
}

.card .card-body {
	padding:15px;
}

.card .card-body .card-body-inner {
    background: #eee;
    min-height: calc(50vh + 60px);
}

.card.card-lg .card-body {padding:32px 20px}

.card.box-show-none {box-shadow:none;border:0;}

.card.card-gray {background-color:#f2f2f2;}
.card.card-blue {background-color:#deebf7;}
/* .card.card-mint {background-color:#def7f1;} */
.card.card-mint {background-color:#f8ebae;}
.card.box-shadow {
	box-shadow:0 0 10px rgba(0,0,0,.125);
}


.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.text-left2 {
    text-align: left !important;
}

.text-center2 {
    text-align: center !important;
}


/* 대시보드 */
.card2-wrap {padding:0 0;}
.card2 {padding:0 10px;background:#fff;}
.card2 .card-header {padding:10px 0;position:relative;}
.card2 .card-header {line-height:32px;}
.card2 .card-header .btn-help.fixed {position:absolute;right:0;top:5px;z-index:10;}
.card2 .card-header .card-title {}
.card2 .card-header .period {color:#666;}
.card2 .card-body {}
.card2 .card-body .card-body-inner {background:#eee;min-height:calc(50vh + 60px);}