@charset 'UTF-8';

/** Common **/
input.default-ip::-webkit-input-placeholder {color: #999;}
input.default-ip:-ms-input-placeholder {color: #999;}
textarea.default-txt::-webkit-input-placeholder {color: #999;}
textarea.default-txt:-ms-input-placeholder {color: #999;}
input.default-ip::placeholder {color: #999;opacity: 1;}
textarea.default-txt::placeholder {color: #999;opacity: 1;}
input.default-ip:focus {border-color:#3BBDF6;}
input.default-ip[readonly] {background:#f4f4f4 !important;}



html, body {    height: 100%;    width: 100%;	/*overflow:hidden;*/}

.wrap{ position:relative; width:100%;  min-width:320px; max-width:800px; padding-top:15px; margin:0 auto;}
.section {width:100%; margin:0 auto; }
.centerWrap ,.container { width:100%;  min-width:320px; max-width:800px; margin:0 auto}
.centerWrap:after{clear:both; display:block; content:''}

/* Header */
#header {position:relative; height:40px; display:fixed; z-index:1}
#header h1{position:absolute; left:4%; top:20px; height:28px; }
#header h1 img{ height:20px; }
#header a.menu-open{position:absolute; right:5%; top:15px; width:22px; height:22px; text-indent: -9999px;background:url(/img/icon/icon_menu.png) no-repeat center; background-size:100%; } 
#header .point-st{position:absolute;  width:184px; box-sizing:border-box; top:12px; right:calc(5% + 25px); z-index:1; padding:5px; text-align:right } 

.mob_gnb_dimm { background:#000; display:none; height:100%; left:0; opacity:0.7; filter:alpha(opaicty=80); position:fixed; top:0; width:310px; z-index:2000; }
.mob_gnb_wrap { background:#fff; height:100%; padding-bottom:30px; position:fixed; right:-100%; top:0; width:310px; z-index:2001; }
.mob_gnb_wrap_inner { height:100%;  overflow-y:auto; }
.mob_gnb_wrap_inner ol{display:block; padding:10px 20px; background:#e0e0e0; position:relative}
.mob_gnb_wrap_inner ol li {display:block; padding:2px 0}
.mob_gnb_wrap_inner ol li.logo img {height:16px; }
.mob_gnb_wrap_inner .btn_gnb_close {position:absolute;  width:21px; height:21px; right:15px;  top:12px; z-index:100; }
.mob_gnb_wrap_inner .btn_gnb_close a {background:url(/img/icon/icon-close.png); background-size:100%; display:block; width:20px;  height:20px; overflow:hidden; text-indent:-20000px; }
.mob_gnb_wrap_inner .mob_gnb_menus ul li { border-bottom:1px solid #e5e5e5;  text-indent:20px; }
.mob_gnb_wrap_inner .mob_gnb_menus ul li a { color:#333; display:block; height:45px; position:relative; width:100%; font-size:16px; font-weight:300; }
.mob_gnb_wrap_inner .mob_gnb_menus ul li a.sub_first{ border-top:3px solid #03328d; }
.mob_gnb_wrap_inner .mob_gnb_menus ul li ul li { border-bottom:none; font-size:18px; font-weight:normal; line-height:50px; text-indent:50px; }
.mob_gnb_wrap_inner .mob_gnb_menus ul li ul li a { color:#4d4d4e; display:block; line-height:34px; height:34px; position:relative; width:84%; margin:0 auto; background:#fff; font-size:14px; text-indent:14px; }
.mob_gnb_wrap_inner .mob_gnb_menus ul li.mob_gnb { background:#fff; border-bottom:1px solid #e5e5e5; font-size:17px; font-weight:normal; line-height:46px; text-indent:20px; }
.mob_gnb_wrap_inner .mob_gnb_menus ul li.mob_gnb a { color:#333; display:block; height:46px; position:relative; width:100%;  font-size:17px; }

.btn{font-weight:normal; border:1px solid #999; line-height:24px; font-size:12px; text-align:center; padding:2px 10px; font-weight:normal}

.main-menu {margin:0 2%}
.main-menu li{display:block; padding:5px 0}
.main-menu li dl{display:flex;  background:#e0e0e0; border-radius:10px}
.main-menu li dl dt{padding:16px 20px 16px 0; width:30%; text-align:right; box-sizing:border-box}
.main-menu li dl dt img{height:80px}
.main-menu li dl dd{padding:25px 0 0 10px}
.main-menu li dl dd strong{font-size:18px; line-height:28px; }
.main-menu li dl dd p{font-size:14px; color:#888}

.tab-menu{display:flex;  align-items:center; justify-content:center;   }
.tab-menu li{width:25%; text-align:center; background:#e9e9e9; padding:5px 0 5px; box-sizing:border-box; border-bottom:3px solid #e9e9e9; border-left:1px solid #e0e0e0}
.tab-menu li img{display:block; height:30px; margin:8px auto}
.tab-menu li.on{border-bottom:3px solid #EE525F; background:#f9f9f9 }
.tab-menu.glo li{width:33.333%; }
.tab-menu.def li{width:50%; }
.tab-menu.noimg li{padding:10px 0 8px; }



.bnak-info{padding:10px 4% 5px}
.bnak-info ul{display:flex;  align-items:center;}
.bnak-info ul li{width:calc(100% - 60px); text-align:right; }
.bnak-info ul li.refresh{width:60px}
.bnak-info ul li.refresh img{width:55%; margin:5px}


.info-box {}
.info-box th {width:29%; padding:8px 1%; line-height:21px; font-size:18px; border-bottom:1px solid #e0e0e0; box-sizing:border-box}
.info-box td { padding:8px 1%; line-height:21px; font-size:18px; border-bottom:1px solid #e0e0e0}


.pack_btn {width:98%;margin:10px auto 0; display:table;}
.pack_btn span {padding-right:3px;display:table-cell;}
.pack_btn span:last-child {padding-right:0 !important;}
.pack_btn a {width:100%;  }

.key-wrap{width:100%; height: calc(100vh - 600px); position:relative}

.key-pad{background:#333 ; width:100%;  height:200px; padding:3px 2%; margin-top:5px;}
.key-pad ul{display:inline-flex;}
.key-pad ul li{ width:25%;  box-sizing:border-box; height:56px }
.key-pad ul li a{width:98%; height:54px; line-height:54px; margin:0 auto; background:#fff; color:#333; font-size:28px; font-weight:bold  }



.keypad {  width:100%;  padding: 5px 0 ; position:fixed; bottom:0; background:#333}

ul {  list-style-type: none;}

.press {  display: inline-block;  width: calc(25% - 14px);  margin: 0 5px;}

.clearfix {  clear: both;}

.button {  width: 100%;  float: left;  display: inline-block;  background: linear-gradient(#505050, #383838);  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);,0 2px 2px rgba(0,0,0,0.4);
  border: 1px solid #000;  padding: 5px;}

.button:hover {  background: linear-gradient(#7a7a7a, #5c5c5c);}

.button.clear {  background: linear-gradient(#673737, #502020);}

.button.clear:hover {  background: linear-gradient(#815151, #742a2a);}

.button.go {  background: linear-gradient(#425c51, #223720);}

.button.go:hover {  background: linear-gradient(#51816d, #125424);}

.press.nr {  width: 100%;}

.number { text-align: center;  margin: 0 !important;  color: #fff;  text-shadow: 1px 1px #000;  font-family: "Helvetica", sans-serif;  font-size:3vh;  line-height: 4.1vh;  min-height: 3vh;}




.tel010{width:99%;    border: 1px solid #e0e0e0;	padding:0 15px  ;	height:40px;	box-sizing:border-box; border-radius:2px;	outline:none;}
.tel010:before{content:"010 -"}
.tel010 input.form-control{display:inline-block; width:70%; border:0; height:30px}
/* 사이트 포인트색 - 버튼 */
.wset {background:#c2143c;border:1px solid #c2143c;color:#fff !important;}


.list-box{margin: 10px auto; width:98%}
.list-box thead{height:38px; display:fixed}
.list-box tbody{height:(100% - 38px); overflow-y:auto; }
.list-box th{border-bottom:1px solid #e0e0e0; line-height:36px; background:#e5e5e5; display:fixed}
.list-box td{border-bottom:1px solid #e0e0e0; line-height:36px; text-align:center}

#footer .foot-top {background:#e5e5e5;}
#footer .foot-top .section {display:flex; align-items:center; height:140px;}
#footer .foot-top .cs-center {position:relative; box-sizing:border-box; padding-top:20px; padding-left:122px; background:url(../images/common/foot-cs.png) left center no-repeat; height:95px;}
#footer .foot-top .cs-center dt {font-size:16px; font-weight:800; color:#262628; letter-spacing:-0.025em;}
#footer .foot-top .cs-center dd a {display:block; font-size:0; height:0; background:url(../images/common/cs-call.png) left center no-repeat; width:173px; height:33px; display:block;}
#footer .foot-top .cs-center dd {margin-top:10px;}
#footer .foot-top .cs-info {margin-left:70px; }
#footer .foot-top .cs-info dt {font-size:18px; letter-spacing:-0.03em; color:#121212; font-weight:800;}
#footer .foot-top .cs-info dd {font-size:16px; letter-spacing:-0.03em; color:#63666e; display:flex; margin-top:10px;}
#footer .foot-top .cs-info dd span {display:flex; align-items:center; margin-left:15px;}
#footer .foot-top .cs-info dd span:first-child {margin-left:0;}
#footer .foot-top .cs-info dd span strong {display:block; font-weight:800; padding-right:6px; margin-right:5px; position:relative;}
#footer .foot-top .cs-info dd span strong:before {content:""; display:block; position:absolute; right:0; top:50%; margin-top:-7px; width:1px; height:14px; background:#6c6e76;}

#footer .foot-btm {background:#171818; padding:50px 0; }
#footer .foot-btm .foot-menu {display:flex; align-items:center;}
#footer .foot-btm .foot-menu a {display:block; position:relative; font-size:16px; letter-spacing:-0.025em; color:#999999; padding-left:18px; margin-left:17px;}
#footer .foot-btm .foot-menu a:first-child {padding-left:0; margin-left:0;}
#footer .foot-btm .foot-menu a:before {content:""; display:block; position:absolute; left:0; top:50%; width:1px; height:16px; background:#999; margin-top:-8px;}
#footer .foot-btm .foot-menu a:first-child:before {display:none;}
#footer .foot-btm .foot-sns {position:absolute; right:0; top:0;  display:flex; }
#footer .foot-btm .foot-sns .btn-sns {margin-left:20px; display:block; width:64px; height:64px; border-radius:32px; background:rgba(38,38,40,0.25);}
#footer .foot-btm .foot-sns .btn-sns:first-child {margin-left:0;}
#footer .foot-btm .foot-sns .btn-sns i {display:block;}
#footer .foot-btm .foot-cont {margin-top:35px; position:relative;}
#footer .foot-btm .foot-cont .foot-info {font-size:14px; line-height:24px; color:#777777; letter-spacing:-0.025em;}
#footer .foot-btm .foot-cont .foot-info .foot-copy {margin-top:15px; color:#999999;}
#footer .foot-btm .foot-cont .foot-family {position:absolute; right:0; bottom:0;}
#footer .foot-btm .foot-cont .foot-family .btn-fs {position:relative; width:160px; height:42px; border:1px solid #cacdc9; box-sizing:border-box; padding:0 20px; font-size:14px; letter-spacing:-0.025em; color:#777777; text-align:left;}
#footer .foot-btm .foot-cont .foot-family .btn-fs:after {content:""; display:block; width:9px; height:5px; background:url(../images/icon/ico-fs-arrow.png) top left no-repeat; position:absolute; right:20px; top:50%; margin-top:-3px;transform:rotate(0deg); transition:200ms;}
#footer .foot-btm .foot-cont .foot-family .btn-fs.open-fs:after {transform:rotate(180deg);}
#footer .foot-btm .foot-cont .foot-family .fs-list {display:none; padding:10px 20px; border:1px solid #cacdc9; background:rgba(38,38,40,0.7); position:absolute; bottom:41px; left:0; box-sizing:border-box; width:100%;}
#footer .foot-btm .foot-cont .foot-family .fs-list li a {display:block; font-size:14px; line-height:24px; color:#777;}

/* 사이드 퀵메뉴 */
.fixed-side-menu {
	position:fixed;
	right:0;
	top:50%;
	transform:translate(0,-50%);
	background:#fff;
	width:80px;
	-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.24);
	-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.24);
	box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.24);
	z-index: 1;
}
.fixed-side-menu ul li {padding:10px 0; position:relative;}
.fixed-side-menu ul li:before {content:""; display:block; width:50px; left:50%; margin-left:-25px; height:1px; background:#ebebeb; position:absolute; top:0;}
.fixed-side-menu ul li:first-child:before {display:none;} 
.fixed-side-menu ul li a {display:block; text-align:center;}
.fixed-side-menu ul li .side-txt {font-size:13px; color:#777777;}
.fixed-side-menu ul li .ico-calendar {display:block; width:50px; height:50px; background:url(../images/icon/ico-calendar.png) top left no-repeat; margin:0 auto;}
.fixed-side-menu ul li .ico-status {display:block; width:50px; height:50px; background:url(../images/icon/ico-status.png) top left no-repeat; margin:0 auto;}
.fixed-side-menu ul li .ico-request {display:block; width:50px; height:50px; background:url(../images/icon/ico-request.png) top left no-repeat; margin:0 auto;}
.fixed-side-menu ul li .ico-view-prod {display:block; width:50px; height:50px; background:url(../images/icon/ico-view-prod.png) top left no-repeat; margin:0 auto;}
.fixed-side-menu .btn-top {background:#171818; display:flex; align-items:center; justify-content:center; height:25px; width:100%;}
.fixed-side-menu .btn-top span {font-size:13px; color:#fff; display:inline-block;}
.fixed-side-menu .btn-top .ico-top {display:inline-block; width:8px; height:4px; background:url(../images/icon/ico-top.png) center no-repeat; margin-left:5px;}


/* 팝업 */
.pop {position:fixed;top:0;left:0;width: 100vw;height: 100vh;z-index:0;display:none;}
.pop.show {display:block;z-index:4;background:#fff;}
.pop-wrap {width: 100vw;height: 100vh;display:flex;align-items:center;justify-content:center;}
.pop-wrap .pop-container {background:#fff;position:relative;width: 100vw;height: 100vh;}
.pop-wrap .pop-container .pop-content.type-btn {padding-bottom:60px;position:relative;box-sizing: border-box; height: calc(100vh - 105px);}
.pop-wrap .pop-container .pop-content.type-btn .btn-area {position:absolute; bottom:0; left:0; width:100%; height:60px;}
.pop-wrap .pop-container .pop-content.type-btn .btn-area .btn-full {width:100%;}
.pop-wrap .pop-container .pop-content.type-btn .btn-area .pop-btn {display:block; height:60px; background:#317ee6; text-align:center; line-height:60px; font-size:18px; letter-spacing:-0.03em; color:#fff;}
.pop-wrap .pop-container .pop-content .con-area {height:100%;overflow-y:auto;box-sizing: border-box;}
.pop-wrap .pop-container .pop-tt {display:flex;font-size:21px;font-weight:bold;letter-spacing:-0.03em;color:#262628;align-items:center;height: 55px;box-sizing: border-box; padding:0 3%}
.pop.tab-pop .pop-wrap .pop-container .pop-tab-area {height:47px;display: flex;align-items: center;box-sizing: border-box;border-bottom: 1px solid #cacdc9;padding: 0 18px;width: 100%;box-sizing: border-box;}
.pop.tab-pop .pop-wrap .pop-container .pop-tab-area .btn-pop-tab {flex:1;height:46px;font-size: 4.5vw;font-weight: 700;color: #262628;position: relative;}
.pop.tab-pop .pop-wrap .pop-container .pop-tab-area .btn-pop-tab.active-tab {color:#317ee6;}
.pop.tab-pop .pop-wrap .pop-container .pop-tab-area .btn-pop-tab.active-tab:after {content:""; display:block; width:100%; height:3px; background:#317ee6; position:absolute; left:0; bottom:-1px;}
.pop.tab-pop .pop-wrap .pop-container .pop-content {height: calc(100vh - 102px);display: none;}
.pop.tab-pop .pop-wrap .pop-container .pop-content.active-cont {display:block;}
.pop-wrap ul li {display:block; line-height:36px; padding:5px 3%;  font-size:17px; border-bottom:1px dotted #e0e0e0;background:url(/img/icon/icon-select.png) no-repeat center right; background-size:20px  }
.pop-wrap table td { line-height:36px; padding:5px ;  font-size:14px; border-bottom:1px dotted #e0e0e0;  }
.pop-wrap table td:first-child{ padding:5px 5px 5px 15px;}



.form-sec {margin-bottom:15px;}
.form-sec:last-child {margin-bottom:0;}
.form-sec .form-label {font-size:14px; color:#63666e; line-height:16px; margin-bottom:5px;}
.form-sec .form-item:nth-child(n+2) {margin-top:10px;}
.form-sec .form-item .form-ip {width:100%; height:42px; box-sizing:border-box; border:1px solid #cacdc9; padding:0 20px; font-size:14px; color:#00050a;}
.form-sec .form-item .form-ip::placeholder {color:#afb0b3;}
.form-sec .form-item {position:relative;}
.form-sec .form-item.type-txt .txt {position:absolute; right:20px; font-size:14px; color:#63666e; top:1px; line-height:40px;}
.form-sec .form-item.type-txt .form-ip {padding-right:40px;}
.form-sec .form-item .form-slc {width:100%; height:42px; box-sizing:border-box; border:1px solid #cacdc9; padding:0 20px; font-size:14px; color:#00050a; background:#fff url(../images/icon/slc-arrow.png) calc(100% - 20px) center no-repeat;}
.form-sec .form-item .form-slc::placeholder {color:#afb0b3;}
.form-sec .form-item .form-txt {width:100%; height:170px; box-sizing:border-box; border:1px solid #cacdc9; padding:15px 20px; font-size:14px; line-height:18px; color:#00050a}
.form-sec .form-item .form-txt::placeholder {color:#afb0b3;}





/* 로그인 */
.loginbox{ position:relative; width:100%; margin:0px auto; padding:0px 5%; box-sizing:border-box}
.loginbox:after{ content:""; clear:both; display:block; }
.loginbox h1{padding:15px 0 5px; }
.loginbox h2{ font:normal 18px/32px Malgun Gothic; padding:15px 0 5px; color:#333;  }
.loginbox h2 strong{font-size:32px }
.loginbox p{ font:normal 12px/24px Malgun Gothic;  color:#666; letter-spacing:-0.5px; vertical-align:middle; }
.loginbox p:after{ content:""; clear:both; display:block; }
.loginbox p:first-child{ line-height:16px; color:#888}
.loginbox p button{width:100%; font:normal 12px/18px Malgun Gothic; margin:0; border:solid 1px #ddd; background:#fff; color:#636363; vertical-align:middle; }
.loginbox p button:hover{ background:#f9f9f9; color:#333; }


.formLogin{ position:relative; width:100%; padding:20px 0 5px 0;}
.formLogin:after{ content:""; clear:both; display:block; }
.formLogin li{ display:block; }
.formLogin li button{ height:52px; font:normal 18px/18px Malgun Gothic; letter-spacing:-1px; background:#a81616; color:#fff; margin:0; vertical-align:top;  border:0}
.formLogin li button:hover{ background:#810000; }
.padding_left{ padding-left:77px; }
.formLogin label{ padding-bottom:4px;  font:bold 12px/30px Malgun Gothic; color:#666; }
.formLogin label:hover{ color:#34ab0b; }
.formLogin label b{ display:inline-block; width:30%;  vertical-align:middle; color:#444; }
.formLogin input[type=text],.formLogin input[type=password]{ width:100%; padding:0px 0 2px 3%; font:normal 14px/36px Malgun Gothic; margin:0 0 4px 0; vertical-align:top; border:1px solid #ddd; height:38px; }
.formLogin input[type=text]:hover,.formLogin input[type=password]:hover,.formLogin input[type=text]:focus,.formLogin input[type=password]:focus{ border-color:#ccc; background:#f9f9f9; }
.formLogin input[type=checkbox]{ width:30px; height:30px;margin:3px 5px 5px 0; vertical-align:middle;float:left }
.join-button {margin-top:10px;}
.join-button button{width:49%;}
.join-button button.join{background:#a81616; color:#fff}
.join-button button.pw-button{float:right;}





.joinWrap{ position:relative; width:100%;  padding:0px 5%; box-sizing:border-box}
.joinWrap h2{display:block; font-size:21px; line-height:32px; padding-top:15px}
.joinWrap dt{display:block; padding:15px 0 0 }
.joinWrap dd{display:block; padding:3px 0; line-height:22px; min-height:32px }
.joinWrap select{width:100% }
.joinWrap input[type=checkbox]{width:28px; height:28px; float:right }

.joinWrap select.photo{width:calc(100% - 56px); display:inline-block}
.filebox {float:right; }
.filebox label {width:50px; height:38px; text-align:center; display: inline-block;  color: #999; font-size: 32px; line-height: normal; vertical-align: middle; background-color: #fdfdfd; cursor: pointer; border: 1px solid #ebebeb; border-bottom-color: #e2e2e2; border-radius: .25em; } 
.filebox input[type="file"] { /* 파일 필드 숨기기 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }

button.find{background:#999; color:#fff; margin-top:5px}
button.join{background:#666; color:#fff; margin-top:5px}


.fix-button {position:fixed; bottom:0;  width:100%;  padding:5px 5%; box-sizing:border-box}
.fix-button button{background:#999; color:#fff}
.fix-button button.submit{width:49%; float:right; background:#a81616}
.fix-button button.cancel{width:49%; background:#efefef; color:#333}

.p-select{width:100%; min-height:32px; height:auto;  background: #fff url(/img/icon/ico-purchase-more.png) calc(100% - 15px) no-repeat; box-sizing:border-box; padding-left:2.5%}

@media (max-width:360px) { 
.wrap{ font-size:13px;}

.tab-menu li{padding:5px 0 3px;}
.tab-menu li img{display:block; height:24px; margin:5px auto}

.list-box thead{height:28px; display:fixed}
.list-box tbody{height:(100% - 28px); overflow-y:auto; }
.list-box th{ line-height:26px; font-size:12px }
.list-box td{line-height:26px;font-size:12px }

.info-box th { padding:5px 1%; line-height:18px; font-size:13px;}
.info-box td { padding:5px 1%; line-height:21px; font-size:13px;}
}