@charset "utf-8"; 
@font-face {
	font-family:'ibm'; 
	font-style:'regular'; 
	font-weight:500; 
	src: url("../fonts/IBMPlexSansKR-Regular.ttf") format('woff'),
}

@font-face {
	font-family:'ibm'; 
	font-style:'medium'; 
	font-weight:550; 
	src: url("../fonts/IBMPlexSansKR-Medium.ttf") format('woff'),
}


@font-face {
	font-family:'ibm'; 
	font-style:'bold'; 
	font-weight:600; 
	src: url("../fonts/IBMPlexSansKR-Bold.ttf") format('woff'),
}


* {margin:0; padding:0; box-sizing:border-box;}
body {position:relative;  font-size:14px; font-family:'ibm' , sans-serif; font-weight: 500; color:#888; line-height: 1.2; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, address {margin:0; padding:0}
pre {margin:0; padding:0; word-wrap:break-word; white-space:pre-line}
table {border:0; border-collapse:collapse; border-spacing:0; width:100%}
fieldset, img {border:0;vertical-align:top}
ul, li {list-style:none}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal; line-height:1em}
a {text-decoration:none; cursor:pointer; color: #000;}
body {position:relative}
em {font-style:normal}
a, button, textarea, input{ font-family:'ibm', sans-serif; font-size: 14px; font-weight: 500;}
legend, hr, caption {position:absolute; top:-9990px; left:-9999px; width:1px; height:1px; opacity:0}
address {font-style:normal}
button { margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 16px;}
p {margin: 0; padding: 0;}
label {color: #666;}
.vText {white-space: pre-line;}
/* rem */
/* 16px 
font 10px : 0.625rem
     20px : 1.25rem

*/

/* common */
.mt10 {margin-top: 10px!important;}
.mt20 {margin-top: 10px!important;}
.mb20 {margin-bottom: 20px!important;}
.back_btn {width: auto;}
.back_btn a {display: inline-block; width: 24px;}
.back_btn span {display: inline-block; margin-left: 10px; margin-top: 3px; font-weight: 700; color: #333; font-size: 16px;}
.back_btn img {width: 100%;}
.normal {font-family: 'ibm'; font-weight: 500; }
.bold {font-family: 'ibm'; font-weight: 600; }
.cRed {color:#c70b49 !important}

/* 버튼 */
.btn {display:inline-block; padding:0 10px; border-radius:10px; -webkit-border-radius:10px;  -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; line-height:30px; font-size:14px; color:#fff; background:#1f3065;}
.btnS {display:inline-block; padding:0 10px; border-radius:10px; -webkit-border-radius:10px;  -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; line-height:30px; color:#414141; background:#ecf0f8}
.btnS.btnWhite {background:#fff}
.btnS.sM {padding:0 20px; line-height:46px; font-size:16px; font-weight:500}
.btn.sM {padding:0 20px; min-width:120px; max-width:100%; line-height:38px; font-weight:500}
.btn.sM.v2 {padding:0 20px; min-width:80px}
.btn.sL {padding:0 30px; border-radius:4px; min-width:140px; max-width:100%; line-height:48px; font-size:16px; font-weight:500}
.btnLine {border-color:#172f56; color:#172f56; background:#fff}
.btnLineG {border-color:#676767; color:#666; background:#fff}
.btnBlue {border-color:#3c465e; background:#3c465e}
.btnBlue2 {background: #1f3065; color: #fff;}
.btnRed {border-color:#c70b49; background:#c70b49}
.btnNavy {border-color:#000; background:#172f56}
.btnGray {border-color:#aaa; color:#666; background:#f2f2f2}
.btnTxt {display:inline-block; line-height:30px; font-size:14px; color:#666; font-weight:500; text-decoration:underline}
.btnDel {display:block; border-radius:50%; width:30px; height:30px; text-indent:-9999px; background:url("../images/btn-del.png") no-repeat center}
.btnBack {display:block; width:30px; height:30px; text-indent:-9999px; background:url("../images/btn-back.png") no-repeat right center}
.btnMore {display:inline-block; padding:0 10px; border:1px solid #ccc; min-width:100px; line-height:30px; font-size:14px; color:#666; background:#fff}
@media (max-width: 767px) {
	.sM {padding:0 10px !important; min-width:inherit !important; white-space:nowrap}
	.sL {border-radius:2px}
	.btnBack {background:url("../images/btn-back-m.png") no-repeat right center/17px auto}
}
.fixedArea .btnArea {display:flex; margin-top:15px}
.fixedArea .btnArea .btnS + .btnS {margin-left:-1px}
.fixedArea .btnArea .btnWhite {flex:1}
.fixedArea .btnArea .btnBlue2 {flex:1}

/* 버튼 정렬 */
.btnBottom {display:flex; justify-content:center; flex-direction:row; flex-wrap:wrap; margin-top:40px}
.btnBottom > * + * {margin-left:10px}
.btnBottom p {min-width:100%; margin-bottom:18px; text-align:center; line-height:22px}
.btnBottom .btnMore {border-radius:30px}
@media (max-width: 767px) {
	.btnBottom.flex > * {flex:none; min-width:inherit; white-space:nowrap}
}

/* .wrap {position: relative; max-width: 768px; width: 100%; min-height: 768px; padding-bottom: 100px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;} */
.wrap {position: relative; max-width: 768px; width: 100%; min-height: 768px; padding-bottom: 100px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.wrap.hidden {overflow: hidden;}
.wrap.login {padding-top: 60px; height: 100vh; min-height: unset;}
.wrap.login .com_btn { position: static; transform:unset ; -webkit-transform:unset ; -moz-transform:unset ; -ms-transform:unset ; -o-transform:unset ; }

input { width: 100%; height: 45px; border: 0; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; padding-left: 50px; box-sizing: border-box;}
.check, .radio {display: flex; align-items: center;}
.check input[type='checkbox'], .radio input[type="radio"] {width: 16px; height: 16px; }
.radio label {font-size: 14px; margin-left: 5px;}

.com_btn { overflow: hidden; position: absolute; bottom:20px; width: 100%; text-align: center; }
.com_btn button, .com_btn a {display: block; width: 100%; height: 45px; text-align: center; background:#1f3065; color: #fff; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ;}
.com_btn a  {margin-top: 10px; line-height: 45px; font-size: 16px; background: #888;}


.com_btn.v2, .com_btn.center {display: flex; width: 100%;}
.com_btn .white { overflow: hidden; width: 33%; margin-right: 2%; border: 1px solid #1f3065; background: #fff; color: #333; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
.com_btn.v2 button:last-child { display: flex; justify-content: space-between; align-items: center; width: 65%; padding: 0 20px; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
.com_btn.v2 button.w100 {width: 100%!important;}
.com_btn.center button { width: 50%; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
.com_btn.cancel button {width: 100%; border: 0; background: #aaa; color: #fff;}

.notice {display: block; padding-bottom: 30px; text-align: right; color: #b82958; text-decoration: underline; font-weight: 600;}
.my_notice {margin-top: 10px; padding: 10px; background: #f8f8f8;}
.my_notice span {display: block; margin-bottom: 10px; color: #0087e4; font-weight: 550;}
.my_notice p {font-size: 12px; line-height: 1.5; color: #333;}

.tab_button {margin: 15px 0;}
.tab_button button {padding: 5px 10px; margin-right: 5px; border: 1px solid #ccc; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ;  font-size: 12px; background: #eaeaea; color: #888; font-weight: 500; }
.tab_button button.active {border: 1px solid #0087e4; background: #fff; color: #0087e4;}



/* login */
.login_wrap { position: absolute; top:50%; left: 50%; width: 100%; height: 80%; padding: 30px 15px 0 15px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); box-sizing: border-box;} 

.login_wrap span {display: block; font-size: 14px;}
.login_wrap .title {font-size: 26px; color: #000;}
.login_wrap .title img {display: inline-block; width: 40%; vertical-align: middle;}
.login_wrap p + span {margin-top: 20px;}
.login_wrap .input_area {width: 100%; margin-top: 45px;}
.login_wrap .input_area .input {position: relative; width: 100%;}
.login_wrap .input_area .input input {padding-left: 12%; font-size: 14px;}
.login_wrap .input_area .input + .input {margin-top: 10px;}
.login_wrap .input_area .input.id input {background: #f8f8f8 url(../images/icon_mail.png) no-repeat 5% center; background-size: 18px;}
.login_wrap .input_area .input.password input { background: #f8f8f8 url(../images/icon_password.png) no-repeat 5% center; background-size: 15px;}
.login_wrap .input_area .input.name input { background: #f8f8f8 url(../images/icon_name.png) no-repeat 5% center; background-size: 18px;}
.login_wrap .input_area .input.nation { display: flex; padding: 0; border-radius:10px ; background: #f8f8f8; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
.login_wrap .input_area .input.nation input  {padding-left: 1.5%; background: none; }
.login_wrap .input_area .input .nation_code {position: relative; display: flex; align-items: center;  padding: 8px; margin-right: 1%;}
.login_wrap .input_area .input .nation_code::after { content: ""; position: absolute; right:0; top:50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; width: 1px; height: 60%; background: #ccc;}
.login_wrap .input_area .input .nation_code img {width: 40px;}
.login_wrap .input_area .input .nation_code span {color: #333; margin-left: 5%;}
.login_wrap .input_area .input.fail {border: 2px solid #b82958;}
.login_wrap .input_area .input.fail .del { position: absolute; right: 10px; top:50%;  width: 16px; height: 16px;transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; }
.login_wrap .input_area .input.fail .del img {width: 100%;}
.login_wrap .input_area .input .confirm {position: absolute; right: 10px; top:50%;  width: 16px; height: 16px;transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; }
.login_wrap .input_area .input .confirm img {width: 100%;}
.login_wrap .check_number {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 40px;}
.login_wrap .check_number .number {width: 23%; height: 70px; border-radius:20px ;  -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; text-align: center; margin-top: 0;}
.login_wrap .check_number .number input {overflow: hidden; width: 100%; height: 100%; padding-left:0; outline:0; text-align: center;  background: #f8f8f8; font-size: 26px;}
.login_wrap .check_number .number input:focus {background: #fff; box-shadow: 0 4px 14px 8px rgba(0,0,0,0.2);}
.login_wrap .check_number .number.check {overflow: hidden; border: 2px solid #0087e4;}

.login_wrap .check_number span {display: block; width: 100%; color: #0087e4; text-align: center; margin-top: 30px;}

.login_wrap .check {margin-left: 1%; margin-top: 20px;}
.login_wrap .check label {margin-left: 10px; color: #333;}
.login_wrap .com_btn {margin-top: 40px;}
.login_wrap .sns_area {display: flex; flex-wrap: wrap; margin-top:50px;  justify-content: center;}
.login_wrap .sns_area span {margin-left: 10px; color: #333; }
.login_wrap .sns_area a { display: flex; align-items: center; width: 100%; height: 60px; padding:18px; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
.login_wrap .sns_area a + a {margin-top: 10px;}
.login_wrap .sns_area a img {width: 100%; max-width: 35px;}
.login_wrap .sns_area a.kakao {background: #ffeb3b;}
.login_wrap .sns_area a.google {border: 1px solid #ccc;}
.login_wrap .sns_area a.naver {background: #00c73c;}
.login_wrap .sns_area a.naver span { color: #fff;}

.login_wrap .find_area {padding-bottom: 30px; margin-top: 30px; text-align: center;}
.login_wrap .find_area span, .login_wrap .find_area a {color: #333;}
.login_wrap .find_area span {margin-top: 10px;}
.login_wrap .find_area span > .bold {color: #0087e4;}
.login_wrap .find_area span.text .bold {display: inline-block;}

.login_wrap .private { position: fixed; bottom:0; left: 50%; transform:translateX(-50%) ; text-align: center; text-decoration: underline; -webkit-transform:translateX(-50%) ; -moz-transform:translateX(-50%) ; -ms-transform:translateX(-50%) ; -o-transform:translateX(-50%) ; }
.login_wrap .private span{display: inline-block; color: #0087e4; cursor: pointer;}
.login_wrap .private span::after {content: ""; position: absolute; bottom:-2px; left: 0; width: 100%; height: 1px; background: #0087e4;}


.login_wrap .private_area {margin-top: 40px;}
.login_wrap .private_area + .private_area {margin-top: 20px;}
.login_wrap .private_area .title {font-size: 18px;}
.login_wrap .private_area .text_area {overflow: auto; padding: 10px; margin-top: 10px; height: 150px; background:#f8f8f8;}
.login_wrap .private_area .text_area p {font-size: 12px; margin-top: 5px;}
.login_wrap .private_area .radio_area {display: flex; justify-content: flex-end; margin-top: 20px;}
.login_wrap .private_area .radio_area .radio:first-child {margin-right: 2%;}
.login_wrap .join_img {position: relative; text-align: center;}
.login_wrap .join_img img {width: 100%; max-width: 80px; margin-bottom: 30px;}
.login_wrap .join_img .com_btn { position: relative; bottom:0; left: 50%; width: 95%; transform:translateX(-50%) ; -webkit-transform:translateX(-50%) ; -moz-transform:translateX(-50%) ; -ms-transform:translateX(-50%) ; -o-transform:translateX(-50%) ; }  
.login_wrap .com_btn {position: fixed; bottom:0; left: 50%; width: 100%; transform:translateX(-50%) ; -webkit-transform:translateX(-50%) ; -moz-transform:translateX(-50%) ; -ms-transform:translateX(-50%) ; -o-transform:translateX(-50%) ;}


/* .content_area {position: relative; height: 100%; padding: 60px 0 30px;} */
.content_area {position: relative; height: 100%; padding: 30px 0 30px;}
.content_area .header {display: flex; align-items: center; justify-content: space-between;}
.content_area .header .icon_area {display: flex; align-items: center; text-align: center;}
.content_area .header .icon_area a {margin-right: 10px;}
.content_area .header .icon_area a:last-child {margin-right: 0;}
.content_area .header .icon_area a img {width: 100%; width: 20px;}
.content_area .header .icon_area span {display: block; margin-top: 5px; font-size: 12px; font-weight:550; color: #333; text-overflow: ellipsis;}
.content_area .sub_title span {font-size: 20px; display: block; color: #333; margin-bottom: 20px; font-weight: 550;}
/* .content_area .content {padding-bottom: 80px;} */
.my_area { padding: 20px; margin-top: 25px; border:1px solid #115dee; background: #e8f3fc; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; box-shadow: 1px 0 2px rgba(0,0,0,0.36);}
.my_area .top {display: flex; align-items: center;}
.my_area .top .img_area { overflow: hidden; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
.my_area .top .img_area img {max-width: 50px;}
.my_area .top .text_area {margin-left: 15px;}
.my_area .top .text_area p {font-size: 16px; line-height: 1.2;}
.my_area .top .text_area p:first-child {margin-bottom: 5px; font-weight: 600; color: #333;}
.my_area .top .text_area p > span {color: #2b64cf;}
.my_area .middle {margin-top: 15px;}
.my_area .middle a {display: inline-block; padding: 5px 10px; border: 1px solid #115dee; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; background: #fff; color: #525b66; font-weight: 550; font-size: 12px; box-shadow: 1px 0 2px rgba(0,0,0,0.36);}
.my_area .middle a + a {margin-left: 5px;}
.my_area .bottom { position: relative; margin-top: 10px; padding: 10px; border-radius: 10px; background: #1f3065; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; }
.my_area .bottom span {display: block; color: #fff; font-size: 12px; font-weight: 600;}
.my_area .bottom span:first-child {overflow: hidden; text-overflow: ellipsis; width: 85%; white-space: nowrap; margin-bottom: 3px;}
.my_area .bottom .link { position: absolute; right: 10px; top:50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; }



.scroll_list {overflow:auto hidden;}
.scroll_list ul {width: 800px; display: flex;}
.scroll_list ul li { position: relative;  margin-right: 1%; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; background: #ccc;}
.scroll_list ul li a {overflow: hidden; display: block; padding: 7px 10px;  border-radius:20px ; text-align: center; font-size: 12px;}
.scroll_list ul li a.active {position: relative; color: #0087e4; background: #fff; border: 1px solid #0087e4;}
.scroll_list ul li a.active::after {content: ""; position: absolute; left: 0; bottom: -17px; width: 100%; height: 3px; background: #0087e4; z-index: 2;}
.scroll_list ul.three {width: 100%;}
.scroll_list ul.three li {width: 33.3333%;}

.scroll_list.main::-webkit-scrollbar {display: none;}
.scroll_list.main ul { border-bottom: 3px solid #ccc;}
.scroll_list.main ul li { position: relative; width: auto; padding-bottom: 5px; text-align: center; border-radius:0 ; -webkit-border-radius:0 ; -moz-border-radius:0 ; -ms-border-radius:0 ; -o-border-radius:0 ;  background: none;}
.scroll_list.main ul li a {display: block; width: auto; padding: 0; margin-right: 10px; border-radius: 0;}
.scroll_list.main ul li a.active {overflow: visible; position: relative; color: #0087e4; background: none; border-radius:0 ; -webkit-border-radius:0 ; -moz-border-radius:0 ; -ms-border-radius:0 ; -o-border-radius:0 ; border: 0;}
.scroll_list.main ul li a.active::after {content: ""; position: absolute; left: 0; bottom: -17px; width: 100%; height: 3px; background: #0087e4; z-index: 2;}



.view_area  {margin-top: 20px;}
.main .view_area {padding-bottom: 0;}
.view_area .view {display: none; flex-wrap: wrap;}
.view_area .view.active {display: block}
.view_area .box {width: 100%;}
.view_area .img_area { overflow: hidden; border-radius:15px ; -webkit-border-radius:15px ; -moz-border-radius:15px ; -ms-border-radius:15px ; -o-border-radius:15px ; height: 108px;}
.view_area .text_info {margin-top: 10px;}
.view_area .text_info .bold {display: block; width: 100%; color: #333; font-weight: 600;}
.view_area .text_info .bold img {width: 10px; margin-left: 5px;}
.view_area .text_info p { overflow: hidden; white-space: nowrap; width: 95%; text-overflow: ellipsis; font-size: 14px; color: #9c9c9c; margin-top: 5px;}
.view_area .text_info p.ellipsis { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: unset; margin-top: 5px; color: #333; }

.arrow_area {display: flex; align-items: center; justify-content: center; margin-top: 15px; } 
.arrow_area a { display: inline-block; width: 50px; height: 30px; border: 1px solid #ccc; border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; text-align: center; line-height: 30px;  box-shadow: 1px 0 2px rgba(0,0,0,0.36);}
.arrow_area a img {vertical-align: middle; margin-top: -2px; width: 9px;}
.arrow_area span {margin: 0 20px;}
.img_area img {width: 100%;}

.product_list {position: relative; margin-top: 30px;}
.product_list .view_area .view.active {display: flex;}
.product_list .view_area .box {width: 31%; margin-right: 10px; margin-bottom: 20px;}
.product_list .view_area .box:nth-child(3n) {margin-right:0;}

.shop_list {position: relative; margin-top: 50px;}
.shop_list .title {display: block; width: 100%; margin-bottom:20px; font-weight: 600; color: #333; font-size: 20px;}
.shop_list .view_area .view.active {display: block;}
.shop_list .view .box {position: relative; }
.shop_list .view .box::after {display: block; content: ""; clear: both;}
.shop_list .view .box + .box {margin-top: 10px;}
.shop_list .view .box .img_area {float: left; width: 30%; max-height: 108px;}

.shop_list .view .box .text_info {float: left; width: 65%; margin-left: 4%;}
.shop_list p.ellipsis {margin-top: 5px; color: #666;}
.shop_list .hash {margin-top: 10px;}
.shop_list .hash span {display: inline-block; margin: 2px; padding: 3px 7px; border: 1px solid #ccc; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; background: #ecf5fe; color: #2b64cf; font-size: 12px; }


.promotion_list {margin-top: 30px;}
.promotion_list .title {display: block; width: 100%; margin-bottom:20px; font-weight: 600; color: #333; font-size: 20px;}

.shop_list.search {margin-top: 10px;}
.shop_list.search .searchbar {position: relative; margin-bottom: 30px;}
/* 24-12-24 추가 */
.shop_list.search .searchbar input {padding:0 24% 0 10px; background:#f8f8f8;}
.shop_list.search .searchbar .search_icon {position: absolute; right: 10px; top: 50%; display: flex;  align-items: center;  height: 100%; transform: translateY(-50%);}
.shop_list.search .searchbar .search_icon button {display: flex; justify-content: center; align-items: center; width: 36px; height: 36px;}
.shop_list.search .searchbar .search_icon button img {width: auto; max-width: 20px;}
.shop_list.search .searchbar .search_icon button.search {border-radius: 10px; background: #0087e4;}
.shop_list.search .searchbar .search_icon button.search img {width: 20px;}
/* 24-12-24 추가 */
.shop_list.search .view_area {padding-bottom: 0;}
.shop_list.search .view_area .view {overflow: auto; display: block;}
.shop_list.search .view_area .nosearch {text-align: center;}
.shop_list.search .view_area .result_text {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.shop_list.search .view_area .result_text .title {width: auto; margin-bottom: 0; font-size: 14px;}
.shop_list.search .view_area .result_text img {margin-top: 2px; margin-right: 4px;}
.shop_list.search .view_area .result_text a {position: relative; color: #333;}
.shop_list.search .view_area .result_text a::after {content: ""; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1px; background: #333;}

.map_area {position: relative; margin: 30px -20px 0;}
.map_area img {width: 100%;}
.map_area .btn { position: absolute; top:20px; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; background: #fff; border: 1px solid #115dee;}
.map_area .btn button {font-size: 12px; color: #525b66; padding: 3px 10px;}
.map_area .btn.left {left: 10px;}
.map_area .btn.right {right: 10px;}
.map_area .shop_list { position: absolute; left: 50%; bottom: 25px; margin-top:0; transform:translateX(-50%) ; width: 95%; padding: 10px; background: #fff; -webkit-transform:translateX(-50%) ; -moz-transform:translateX(-50%) ; -ms-transform:translateX(-50%) ; -o-transform:translateX(-50%) ; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; -o-border-radius:20px; }
/* .map_area .shop_list img {width: auto;} */
.map_area .shop_list .box {display: flex; align-items: center;}
.map_area .shop_list .box .bold {font-weight: 600; color: #333;}
.map_area .shop_list .box .text_info {margin-left: 3%;}

.find .search_title {display: block; margin-top: 15px; color: #333;} 
.find .shop_list.search .searchbar {margin-bottom: 0;}
.find .search_result_area ul li { border-bottom: 1px solid #ccc; padding: 15px 0;}
.find .search_result_area ul li span {overflow: hidden; display: block; width: 95%; text-overflow: ellipsis; white-space: nowrap;}

.find + .com_btn {position: static; margin-top: 20px;}

.promotion_area {position: relative; margin-top: 45px;}
.promotion_area .top {display: flex; justify-content: space-between;}
.promotion_area .top .title {color: #333; font-weight: 600; font-size: 20px;}
.promotion_area .top > div {display: flex; align-items: center;}
.promotion_area .top > div img {margin-right: 5px;}
.promotion_area .top > div a {text-decoration: underline;}
/* .promotion_area .list_box {margin-top: 20px;} */
.promotion_area .list_box > div {margin-top:30px;}
.promotion_area .list_box .box + .box {margin-top: 30px;}
.promotion_area .img_area { overflow: hidden; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; }
.promotion_area .img_area img {width: 100%;}
.promotion_area .list_box .promo_text {margin-top: 15px;}
.promotion_area .list_box .promo_text span {display: block;}
.promotion_area .list_box .promo_text span.bold {color: #333;}
.promotion_area .list_box .promo_text span + span {margin-top: 5px; font-size: 14px;}
.promotion_area .list_box .box.close .img_area {position: relative;}
.promotion_area .list_box .box.close .img_area::after {content:  ""; position: absolute; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; background: rgba(0,0,0,0.6);}
.promotion_area .list_box .box.close .img_area .close_ment { position: absolute; top:50%; left:50%; transform:translate(-50%, -50%) ; -webkit-transform:translate(-50%, -50%) ; -moz-transform:translate(-50%, -50%) ; -ms-transform:translate(-50%, -50%) ; -o-transform:translate(-50%, -50%) ; color: #fff; font-weight: 550; z-index: 1;}

.detail_page {position: relative; margin-top: 30px;}
.detail_page span {display: block;}
.detail_page span + span {margin-top: 5px;}
.detail_page .title {color: #333; font-size: 18px;}
.detail_page .prom_img { overflow: hidden; border-radius:20px ; margin-top: 20px; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; }
.detail_page .prom_img img {width: 100%;}

.wrap.shop {padding: 0;}
.wrap.shop .content_area {padding:0;}
.wrap.shop .header {position: absolute; width: 90%; top:20px; left: 20px; right: 20px;}
.wrap.shop .com_btn {padding: 0 20px; box-sizing: border-box; bottom:20px;}
.wrap.shop .com_btn button { border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
/* .wrap.shop .store_info_area {overflow: hidden; position: relative; top:-20px; padding: 20px 20px 0; border-top-left-radius: 10px; border-top-right-radius: 10px; background: #fff;} */
.wrap.shop .store_info_area {overflow: hidden; position: relative; padding: 20px 20px 0; border-top-left-radius: 10px; border-top-right-radius: 10px; background: #fff;}
.wrap.shop .img_area_wrap {position: relative;}
.wrap.shop .img_area_wrap .btn_area { position: absolute; bottom:30px; left: 50%; transform:translateX(-50%) ; -webkit-transform:translateX(-50%) ; -moz-transform:translateX(-50%) ; -ms-transform:translateX(-50%) ; -o-transform:translateX(-50%) ; }
.wrap.shop .img_area_wrap .btn_area button {width: 10px; height: 3px; margin-right: 5px; background: #ccc;}
.wrap.shop .img_area_wrap .btn_area button.active {width: 20px; background: #fff;}
.wrap.shop .back_btn {position: absolute; top:20px; left: 20px; z-index: 10;}

.wrap.prod {padding: 0;}
.wrap.prod .content_area {padding:0;}
.wrap.prod .header {position: absolute; width: 90%; top:20px; left: 20px; right: 20px;}
.wrap.prod .com_btn {position: fixed; box-sizing: border-box;}
.wrap.prod .com_btn button {width: 90%; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
/* .wrap.shop .store_info_area {overflow: hidden; position: relative; top:-20px; padding: 20px 20px 0; border-top-left-radius: 10px; border-top-right-radius: 10px; background: #fff;} */
.wrap.prod .store_info_area {overflow: hidden; position: relative; padding: 20px 20px 0; border-top-left-radius: 10px; border-top-right-radius: 10px; background: #fff;}
.wrap.prod .img_area_wrap {position: relative;}
.wrap.prod .img_area_wrap .btn_area { position: absolute; bottom:30px; left: 50%; transform:translateX(-50%) ; -webkit-transform:translateX(-50%) ; -moz-transform:translateX(-50%) ; -ms-transform:translateX(-50%) ; -o-transform:translateX(-50%) ; }
.wrap.prod .img_area_wrap .btn_area button {width: 10px; height: 3px; margin-right: 5px; background: #ccc;}
.wrap.prod .img_area_wrap .btn_area button.active {width: 20px; background: #fff;}
.wrap.prod .back_btn {position: absolute; top:20px; left: 20px; z-index: 10;}

.sideArea .bold {color: #333; font-size: 14px;}

h3.tit {margin-bottom:6px; line-height:26px; font-size:16px; color:#000}
.fixedArea .total p {text-align:right; line-height:44px; font-size:14px; font-weight:500; color:#000}
.fixedArea .total p strong {font-size:30px}
.sideArea {margin-left:5.8%; min-width:330px; max-width:330px}
.sideArea .btnToggle {display:none}
@media (max-width: 1160px) {
	.fixedArea .total p {margin-top:-3px; line-height:30px}
	.sideArea {display:none}
	.sideArea.fixedArea {display:block; overflow-y:auto; position:fixed; bottom:0; left:0; z-index:10; margin:0; padding:10px 15px 20px; border-radius:10px 10px 0 0; width:100%; min-width:100%; max-height:calc(100% - 130px); background:rgba(255,255,255); box-shadow:0px -5px 7px rgb(0, 0, 0, 0.3)}
	.sideArea.fixedArea .slideBox {display:none}
	.sideArea.fixedArea .btnToggle {display:block; position:absolute; top:0; left:0; border:none; width:100%; height:30px; text-indent:-9999px; background:url("../images/bl-arrow02.png") no-repeat center/10px auto}
	
	.sideArea.fixedArea .btnToggle2 {display:block; border:none; width:100%; height:40px; text-indent:-9999px; background:url("../images/bl-opt-arrow-up.png") no-repeat center/100% auto}
	.sideArea.fixedArea.on .btnToggle2 {transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg)}

	.sideArea.fixedArea.on .slideBox {display:block}
	.sideArea.fixedArea.on .btnToggle {transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg)}
}

.store_info_area span {display: block;}
/* 24-12-24 추가 */
.store_info_area .maintain_area {min-height: unset;}
/* .store_info_area .maintain_area .scroll {overflow: auto; height:160px;} */
/* .store_info_area .maintain_area .scroll {overflow: auto; min-height:160px;} */
.store_info_area .maintain_area .scroll {overflow: auto;}


/* .store_info_area .top_area .statue {position: absolute; top:0; right: 0;} */
/* 24-12-24 추가 */

.store_info_area .top_area.type .flex {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.store_info_area .top_area.type .type_name {display: flex; align-items: center; margin-top: 10px; border-top:1px solid #ccc; border-bottom: 1px solid #ccc; padding: 7px 0;}
.store_info_area .top_area.type .type_name .img_area {width: 30px; margin-right: 10px;}
.store_info_area .top_area.type .type_name span {color: #333;}
.store_info_area .top_area.type .statue {position: static;}

.store_info_area .top_area {position: relative;}
.store_info_area .top_area .bold {color: #333; font-size: 20px;}
.store_info_area .top_area span + span {font-size: 14px; margin-top: 3px;}

.store_info_area .top_area .statue {position: absolute; top:0; right: 0;}
.store_info_area .top_area .statue span {padding: 5px 10px; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; background: #79d05b; color: #fff;}
.store_info_area .top_area .statue.close span {background: #ed7205;}
.store_info_area .middle {margin-top: 10px;}
.store_info_area .middle .black {color: #333; line-height: 1.5;}
.store_info_area .middle .info_icon {display: flex;}
.store_info_area .middle .info_icon > div {margin-right: 15px;}
.store_info_area .middle .info_icon > div span {margin-top: 10px; font-size: 14px; text-align: center; color: #333;}
.store_info_area .middle .admin_area {margin-top: 30px;}
.store_info_area .middle .bold {color: #333;}
.store_info_area .middle .scroll_list {margin-top: 5px;}
.store_info_area .middle .scroll_list ul {border-bottom: 0;}
.store_info_area .middle .scroll_list ul li {margin-right: 2%; background: none;}
.store_info_area .middle .scroll_list .img_area {overflow: hidden; width:80px; border-radius:50% ; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; }
.store_info_area .middle .scroll_list span {margin-top: 10px; font-size: 14px; color: #525b66; font-weight: 550;}
.store_info_area .middle .scroll_list span:last-child {margin-top: 3px; font-weight: 500;}
.store_info_area .store_tab_area {margin-top: 30px; padding-bottom: 90px;}
.store_info_area .store_tab_area .bold {margin-bottom: 5px; font-size: 14px; color: #333;}
.store_info_area .store_tab_area > ul {display: flex; justify-content: center; border-bottom: 3px solid #ccc; padding: 10px 0;}
.store_info_area .store_tab_area > ul li {width: 50%; text-align: center; }
.store_info_area .store_tab_area > ul li.active a {display: block; width: 100%; position: relative; color: #0087e4;}
.store_info_area .store_tab_area > ul li.active a::after {content:""; position: absolute; bottom:-13px; left: 0; width: 100%; height: 3px; background: #0087e4; z-index: 10;}
.store_info_area .store_tab_area .explain_text {padding-bottom: 30px;}
.store_info_area .store_tab_area .explain_text > div {line-height: 1.4;}
.store_info_area .store_tab_area .explain_text p {font-size: 14px; color: #333; font-weight: 550; line-height: 1.5;}
.store_info_area .store_tab_area .explain_text button {position: absolute; right: 20px;  display: inline-block; text-align: right; text-decoration: underline; font-size: 14px; color: #525b66; font-weight: 550;}
.store_info_area .store_tab_area .time_list {color: #333; font-size: 14px;}
.store_info_area .store_tab_area .time_list ul > li {display: flex;}
.store_info_area .store_tab_area .time_list ul > li + li {margin-top: 5px;}
.store_info_area .store_tab_area .time_list ul > li span + span {color: #525b66; font-weight: 550;}
.store_info_area .store_tab_area .number {margin-top: 15px;}
.store_info_area .store_tab_area .number a {font-size: 14px; text-decoration: underline; color: #0087e4;}
.store_info_area .store_tab_area .map_list {margin-top: 15px;}
.store_info_area .store_tab_area .map_list .address {color: #525b66; font-weight: 550;}
.store_info_area .store_tab_area .map_list .img_area {margin-top: 10px;}
.coupon_box {position: relative;}
.coupon_box + .coupon_box {margin-top: 20px;}
.coupon_box::after {display: block; content: ""; clear: both;}
.coupon_box .img_area {float: left; overflow: hidden; width: 30%; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px; margin-right: 3%;}
.coupon_box .coupon_info {float: left; width: 65%;}
.coupon_box .coupon_info .bold {font-size: 14px;}
.coupon_box .coupon_info p.ellipsis {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: unset; color: #333; font-size: 14px;}
.coupon_box .coupon_info .price {display: flex; justify-content: space-between; margin-top: 30px;}
.coupon_box .coupon_info .price span {color: #2b64cf; font-weight: 600;}
.coupon_box .coupon_info .price a {position: relative; color: #525b66;}
.coupon_box .coupon_info .price a::after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #525b66;}
.buy_warp {margin-top: 20px; padding-bottom: 80px;}
.buy_info {position: relative;}
.buy_info.mt30 {margin-top: 30px;}
.buy_info::after {content: ""; clear: both; display: block;}
.buy_info .img_area {float: left; width: 35%;}
.buy_info .img_area { overflow: hidden; border-radius:15px ; -webkit-border-radius:15px ; -moz-border-radius:15px ; -ms-border-radius:15px ; -o-border-radius:15px ; height: 123px;}

.buy_info .text {float: left; width: 55%; padding: 10px 0; margin-left: 5%;}
.buy_info .text .bold {color: #333; font-weight: 600;}
.buy_info .text .ellipsis {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: unset; margin-top: 10px; color: #505050;  font-size: 14px;}
.buy_info .text span {display: block; margin-top: 15px; font-size: 16px;}
.buy_warp p.etc {margin-top: 20px; color: #505050; font-size: 14px; font-weight: 550; line-height: 1.6;}
.buy_warp .list  {margin-top: 30px;}
.buy_warp .list span {display: block; color: #333; font-size: 20px; font-weight: 600;}
.buy_warp .list li {margin-top: 10px; padding-left: 20px; background: url('../images/icon_list_arrow.png') no-repeat left center; color: #505050; font-weight: 550;}

.card_select .bold {display: block; margin-top: 30px; color: #333; }
.card_select .result_text {display: flex; justify-content: space-between; margin-top: 20px;}
.card_select .result_text span {font-size: 14px; color: #333; font-weight: 550;}
.card_select .result_text .money {color: #2b64cf; font-size: 16px; font-weight: 600;}
.card_select .result_text .money.orange {color: #ed7205;}
.card_select .result_text .money.red {color: #B92C43;}
.card_select .result_text .money.gray {color: #888;}

.card_select .result_text .sub_area {display: flex; align-items: center;}
.card_select .result_text .sub_area span:first-child {margin-right: 10px; font-size: 14px; color: #9c9c9c;}

.normal_box {display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 15px 20px; background: #f8f8f8;}
.normal_box span {display: flex; align-items: center;}
.normal_box span.bold {margin-top: 0; font-weight: 550;}
.normal_box span img {margin-right: 10px;}
.normal_box .radio input[type="radio"] + label, 
.normal_box .check input[type="checkbox"] + label {width: 16px; height: 16px;}


/* 24-12-24 추가 */
.check input[type="checkbox"] {display: none; position: relative;}
.check input[type="checkbox"] + label {position: relative;  padding-left: 20px; color: #333;}
.check input[type="checkbox"] + label::before {content: ""; position: absolute; top:0; left: 0; width: 16px; height: 16px; background: url('../images/icon_check_off.png') no-repeat 0 0; background-size: cover; opacity: 0.3;}
.check input[type="checkbox"]:checked + label::before {background: url('../images/icon_check_on.png') no-repeat ; background-size: cover; opacity: 1;}
/* 24-12-24 추가 */

.radio input[type="radio"] {display: none; position: relative;}
.radio input[type="radio"] + label {position: relative; padding-left: 20px; color: #333;}
.radio input[type="radio"] + label::before {content: ""; position: absolute; top:0; left: 0; width: 16px; height: 16px; background: url('../images/icon_check_off.png') no-repeat 0 0; background-size: cover;}
.radio input[type="radio"] + label::before {content: ""; position: absolute; left: 0; width: 16px; height: 16px; background: url('../images/icon_check_off.png') no-repeat 0 0; background-size: cover; opacity: 0.3;}
.radio input[type="radio"]:checked + label::before {background: url('../images/icon_check_on.png') no-repeat ; background-size: cover; opacity: 1;}

.agreement_area {margin-top: 40px;}
.agreement_area .bold {color: #333;}
.agreement_area .normal_box .check_area{display: flex; align-items: center;}
.agreement_area .normal_box .check_area .check {margin-right: 5px;}
.agreement_area .normal_box a {text-decoration: underline; color: #505050; font-size: 14px;}

.agreement_area .text_list {overflow: auto; height: 150px; padding: 0 40px 20px; background: #f8f8f8;}
.agreement_area .text_list p {font-size: 14px;}
.agreement_area .text_list p + p{margin-top: 5px;}
.agreement_area .radio input[type="radio"] + label, .agreement_area .check input[type="checkbox"] + label {width: auto;}

.buy_list {position: relative; margin-top: 30px; padding-bottom: 40px;}
.buy_list::before{content: ""; position: absolute; left: -20px; right: -20px; bottom: -1px; width: 500px; height: 1px; background: #ccc;}
.buy_list::after {content: ""; position: absolute; left: -20px; right: -20px; bottom: 0; width: 500px; height: 7px; background: #ececec;}
.buy_list .bold {display: block; font-weight: 550; color: #333;}
.buy_list ul {margin-top: 10px;}
.buy_list ul + ul {margin-top: 20px;}
.buy_list ul + ul > .bold {display: block; margin-bottom: 10px; font-weight: 600;}
.buy_list ul li {display: flex; justify-content: space-between; align-items: center;}
.buy_list ul li + li {margin-top: 10px;}
.buy_list ul li:last-child {margin-top: 20px;}
.buy_list ul li .img_area {display: flex; align-items: center;}
.buy_list ul li .img_area.option {padding-left: 40px;}
.buy_list ul li .img_area img {width: 30px; height: 30px; margin-right: 10px;}
.buy_list ul li .img_area span {color: #333; font-size: 14px;}
.buy_list ul li .pay {text-align: right;}
.buy_list ul li .pay .discount {display: flex; width: 100%; margin-bottom: 5px; font-size: 12px; }
.buy_list ul li .pay .discount span {color: #888; font-size: 12px; text-align: center;}
.buy_list ul li .pay .discount span:first-child {margin-right: 5px;text-decoration:line-through; }
.buy_list ul li .pay span {font-size: 14px; color: #0087e4; font-weight: 550;}
.buy_list ul li .pay span.bold {font-size: 16px; color: #333; font-weight: 600;}

.buy_list ul li .my_reservation {width: 100%;}
.buy_list ul li .my_reservation .img_area {position: relative; display: block; width: 100%;}
.buy_list ul li .my_reservation .img_area .blue { position: absolute; top:7px; right: 0; color: #0087e4; font-weight: 550;}
.buy_list ul li .my_reservation .img_area > * {display: inline-block; vertical-align: middle;}
.buy_list ul li .my_reservation .img_area .img_area_sub {position: relative; width: 100%; margin-top: 20px;}
.buy_list ul li .my_reservation .img_area .img_area_sub > * {display: inline-block; vertical-align: middle;}

.question_area {position: relative; margin-top: 40px;}
.question_area .title {color: #333; font-size: 18px; font-weight: 600;}
.question_area .question_box {margin-top: 30px;}
.question_area .question_box .bold {color: #333; font-weight: 600;}
.question_area .question_box .bold + p {color: #333; margin-top: 10px; font-weight: 600;}
.question_area .question_box .bold + p:last-child {font-weight: 500;}
.question_area .question_box .answer_list {position: relative; margin-top: 5px;}
.question_area .question_box .answer_list::after {display: block; content: ""; clear: both;}
.question_area .question_box .answer_list .check {float: left; width: 50%; margin-top: 15px;}
.question_area .question_box .answer_list .radio {margin-top: 15px;}
.question_area .question_box .answer_list .check.w100 { clear: both; width: 100%;}
.question_area .question_box .text_area {float: left; overflow: hidden; border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; }
.question_area .question_box .text_area {width: 100%; height: 100px; margin-top: 10px;}
.question_area .question_box .text_area textarea {width: 100%; height: 100%; border: 0; padding: 10px; resize: none; background: #ececec; font-size: 14px;}

.question_area.border {position: relative; padding-bottom: 40px;} 
.question_area.border::before { content: ""; position: absolute; left: -20px; right: -20px;  bottom: -1px; width: 500px;  height: 1px; background: #ccc;}
.question_area.border::after { content: ""; position: absolute; left: -20px; right: -20px; bottom: 0; width: 500px;  height: 7px; background: #ececec;}

.maintain_area {margin-top: 20px; overflow: auto; min-height:230px;}
.maintain_area.border {position: relative; overflow: visible; padding-top: 20px;}
.maintain_area.border::after{content: ""; position: absolute; top:-3px; left:-1000px; right:10000px; width: 18000px; height: 3px; background: #ececec;}
.maintain_area.border::before {content: ""; position: absolute; top:0; left:-1000px; right:10000px; width: 18000px; height: 1px; background: #ccc;}
.maintain_area .select_area { display: flex; align-items: center; justify-content: space-between; padding: 15px; margin-top: 5px; background: #f8f8f8; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; } 
.maintain_area .select_area  + .select_area {margin-top: 5px;}
.maintain_area .select_area span {color: #333;}
.maintain_area .select_area .select {padding-right: 20px; background: url('../images/icon_down_arrow.png') no-repeat right center;}
.maintain_area .select_area .select span {font-size: 14px; color: #525b66;}
.maintain_area .select_area .select .blue {color: #0087e4; margin-top: 5px;}
.maintain_area .select_area.error {border: 2px solid #b82958;}
.maintain_area .select_area.correct, .maintain_area .select_area.complete {border:2px solid #0087e4;}
.maintain_area span.error {display: block; margin: 30px 0 10px; color: #b82958; text-align: center; font-weight: 600;}
.maintain_area .select_area.complete > span {color: #2b64cf; font-weight: 600;}

.maintain_area .select_area .ticket { padding: 5px 7px; border: 1px solid #b1bcc7; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ;  font-size: 12px; background: #ecf5fe; color: #2b64cf;}
.maintain_area .select_area .ticket.no {background: #ddd;  color: #707070;}


.maintain_area .box_maintain { position: relative; padding: 8px; background: #efefef; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
.maintain_area .box_maintain + .box_maintain {margin-top: 15px;}
.maintain_area .box_maintain.checked {border: 2px solid #0087e4;}
.maintain_area .box_maintain::after {display: block; clear: both; content: "";}
.maintain_area .box_maintain .img_area {float: left; max-width: 93px; width: 100%; margin-top: 0;}
.maintain_area .box_maintain .text_maintain {float: left; width: calc(100% - 40%); margin-left: 5%; padding: 10px 0;}
.maintain_area .box_maintain .text_maintain span { display: block; font-size: 14px;}
.maintain_area .box_maintain .text_maintain span {overflow: hidden; width: 95%; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 5px;}
.maintain_area .box_maintain .text_maintain span.money {margin:0; color: #2b64cf; font-weight: 600;}
.maintain_area .box_maintain .text_maintain .percent span {display: inline-block; width: auto; margin-bottom: 0; font-size: 13px;}
.maintain_area .box_maintain .text_maintain .percent .underline {text-decoration: line-through; margin-right: 5px;}
.maintain_area .box_maintain .check { position: absolute; top:50%; right: 10px; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; }

.time_wrap {padding-bottom: 80px;}
.time_wrap .bold {display: block; margin-top: 20px; color: #333; font-size: 16px;}
.time_wrap > .bold {font-size: 20px;}
.time_wrap .calender_area {margin-top: 20px;}
.time_wrap .calender_area img {width: 100%;}
.time_wrap .time_select {margin-top: 20px;}
.time_wrap .time_select .time_box {display: flex; flex-wrap: wrap; margin-top: 10px;}
.time_wrap .time_select .time_box .box {width: 23%;  margin: 3px;}
.time_wrap .time_select .time_box .box > div {padding:10px 0; font-size: 14px; text-align: center; color: #525b66; font-weight: 550;  border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ;}
.time_wrap .time_select .time_box .box .empty {background: #f1f1f1; color: #989898;}
.time_wrap .time_select .time_box .box .available {outline: 2px solid #0087e4; }
.time_wrap .staff_box_area {display: flex; flex-wrap: wrap; margin-top: 10px;}

.time_wrap .staff_box {margin-bottom: 10px; padding: 10px;  border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; border: 1px solid #ccc;}
.time_wrap .staff_box.select {border: 2px solid #0087e4;}
.time_wrap .staff_box {width: 31%; margin-right: 2%;}
.time_wrap .staff_box .img_area {overflow: hidden; max-width: 80px;  margin:0 auto; border-radius:50% ; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; }
.time_wrap .staff_box p {margin-top: 5px; text-align: center; font-size: 14px;}
.time_wrap .staff_box p:nth-child(2) {font-weight: 600;}

.favourite_area .bold {display: block; margin-top: 20px; color: #333; font-size: 20px;}
.favourite_area .scroll_list {margin-top: 20px;}
.favourite_area .view_area {display: block;}
.favourite_area .view {display: block;}
.favourite_area .view .box {position: relative; margin-top: 10px;}
.favourite_area .view .box::after {display: block; content: ""; clear: both;}
.favourite_area .view .box .img_area {float: left; width: 30%}
.favourite_area .view .box .text_info {float: left; width: 65%; margin-left: 4%;}
.favourite_area .view_area .text_info .bold {margin-top: 10px; font-size:14px;}
.favourite_area .view .favourite_select {display: flex; margin-top: 10px;}
.favourite_area .view .favourite_select button {display: flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; border: 1px solid #b1bcc7; font-size: 14px; background:#1f3065; color: #fff;}
.favourite_area .view .favourite_select button.zzim {margin-right: 5px; background: #fff;}

.faq_area .bold {display: block; margin-top: 20px; color: #333; font-size: 18px;}
.faq_area .faq_list_box {margin-top: 20px; border-top: 1px solid #000;} 
.faq_area .faq_list_box .top {display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #ccc;}
.faq_area .faq_list_box .top .title {color: #333; font-weight: 600;}
.faq_area .faq_list_box .top button {position: relative; display: flex; align-items: center;}
.faq_area .faq_list_box .content {display: none; padding: 10px 20px; background: #f4f4f4; font-size: 12px;  line-height: 1.5;}
.faq_area .faq_list_box .content.show {display: block;}

.my_info_wrap {margin-top: 30px; padding-bottom: 80px;}
.my_info_wrap .info_text {position: relative; display: flex; align-items: center;}
.my_info_wrap .info_text::after {display: block; clear: both; content: "";}
.my_info_wrap .info_text .img_area { float: left; overflow: hidden; width: 90px; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; }
.my_info_wrap .info_text .img_area img {width: 100%;}
.my_info_wrap .info_text .text_area {float: left; width: calc(100% - 160px); margin-left: 5%;}
.my_info_wrap .info_text .text_area span {display: block; margin-bottom: 10px;}
.my_info_wrap .info_text .text_area .bold {margin-bottom: 10px; color: #333;}
.my_info_wrap .info_text .text_area input[type="file"] + label {position: absolute; bottom:0; display: flex; align-items: center; padding: 7px;  border: 1px solid #ccc; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
.my_info_wrap .info_text .text_area button img {width: 15px; max-width: 100%;} 
.my_info_wrap .myinfo_menu {margin-top: 20px; border-top: 1px solid #333;}
.my_info_wrap .myinfo_menu li {padding: 15px; background: url('../images/icon_Rarrow.png') no-repeat 95% center; background-size: 10px; border-bottom: 1px solid #ccc;}
.my_info_wrap .myinfo_menu li a {display: flex; align-items: center; flex-wrap: wrap;}
.my_info_wrap .myinfo_menu li img {width: 20px; margin-right: 5px; }
.my_info_wrap .myinfo_menu li span {color: #333;}
.my_info_wrap .myinfo_menu li.ticket {background: none;}
.my_info_wrap .ticket_area {margin-top: 20px;}
.my_info_wrap .ticket_area .ticket_box {position: relative; width: 100%; padding: 10px; border-radius:10px ; background: #e8f3fc; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
.my_info_wrap .ticket_area .ticket_box + .ticket_box {margin-top: 10px;}
.my_info_wrap .ticket_area .ticket_box span {display: block; font-size: 12px;}
.my_info_wrap .ticket_area .ticket_box .bold {margin-bottom: 5px; color: #333;}
.my_info_wrap .ticket_area .ticket_box .flex {display: flex; justify-content: space-between; margin-top: 15px;}
.my_info_wrap .ticket_area .ticket_box .flex .blue{ color: #0087e4; font-weight: 550;}
.my_info_wrap .ticket_area .ticket_box .flex .count {font-weight: 550;}
.my_info_wrap .ticket_area .ticket_box .active { position: absolute; top: 10px; right: 10px; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; background: #0087e4;padding: 5px 7px; font-size: 12px; color: #fff;}
.my_info_wrap .ticket_area .ticket_box .active.off { background: #98acbc; }
.my_info_wrap .appinfo {margin-top: 20px;}
.my_info_wrap .appinfo ul li {margin-top: 10px; font-size: 14px; font-weight: 550;}
.my_info_wrap .select_nation {position: relative; margin-top: 20px; margin-top: 0;}
.my_info_wrap .select_nation .select_box { position: relative; display: flex; align-items: center; padding: 10px ; border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; background:#f8f8f8 url('../images/icon_down_arrow.png') no-repeat 95% center;}
.my_info_wrap .select_nation .select_area {overflow: auto; position: absolute; top:38px; height:80px; width: 100%; box-shadow: 3px 5px 4px #ccc;}
.my_info_wrap .select_nation .select_list {display: flex; align-items: center; padding: 8px 10px; background: #f8f8f8; border-bottom: 1px solid #ccc; }
.my_info_wrap .select_nation .select_list:first-child {border-top: 1px solid #ccc;}
.my_info_wrap .select_nation span {color: #333; margin-left: 20px;}
.my_info_wrap .select_nation img {width: 40px;}
.my_info_wrap .input_warp {margin-top: 20px;}
.my_info_wrap .input_warp .input_area + .input_area {margin-top: 20px;}
.my_info_wrap .input_warp .input_area .bold {display: block; margin-bottom: 10px; color: #333;}
.my_info_wrap .input_warp .input_area .input input {width: 100%; padding-left: 20px; background: #f8f8f8;} 
.my_info_wrap .input_warp .input_area.two {display: flex; justify-content: space-between;}
.my_info_wrap .input_warp .input_area.two > div {width: 49%;}
.my_info_wrap .input_warp .input_area .select.sex{ height: 45px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.my_info_wrap .input_warp .input_area .select.sex select { border: 0; width: 100%; height: 100%; padding-left: 20px; background: #f8f8f8; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; font-size: 14px;}
.my_info_wrap .input_warp .input.nation {display: flex; background: #f8f8f8;}
.my_info_wrap .input_warp .input .nation_code {position: relative; display: flex; align-items: center; padding: 10px; margin-right: 1%;}
.my_info_wrap .input_warp .input .nation_code img {width: 40px;}
.my_info_wrap .input_warp .input .nation_code span {padding-right: 20px; margin-left: 5px; border-right: 1px solid #ccc;}
.my_info_wrap .input_warp .input_area.address .input {margin-top: 10px;}
.my_info_wrap .input_warp .input_area.address .find {position: relative;}
.my_info_wrap .input_warp .input_area.address .find input {padding-right: 120px;}
.my_info_wrap .input_warp .input_area.address .find button {position: absolute; right: 0; width: 100px; height: 100%; background: #1f3065; font-size: 14px; color: #fff; border-top-right-radius: 5px; border-bottom-right-radius: 5px;} 

.myresveration_area > .bold {display: block; margin-top: 20px; color: #333; font-size: 18px;}
.myresveration_area .scroll_list {margin-top: 20px;}
.myresveration_area .my_box { overflow: hidden; border: 1px solid #ccc; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; }
.myresveration_area .my_box + .my_box {margin-top: 20px;}
.myresveration_area .my_box .bold  {display: block; width: 100%; background: #ededed; text-align: center; padding: 10px 0; color: #333;}
.myresveration_area .middle {position: relative; padding: 10px 10px 20px;}
.myresveration_area .middle::after {display: block; content: ""; clear: both;}
.myresveration_area .middle .img_area {float: left; width: 30%;}
.myresveration_area .middle .text_info {float: left; width: 65%; margin-left: 5%;}
.myresveration_area .middle .text_info .bold {display: block; padding: 0; background: none; text-align: left; overflow: hidden; text-overflow: ellipsis; width: 70%; white-space: nowrap;} 
.myresveration_area .middle .text_info .blue {margin-top: 10px;}
.myresveration_area .middle .text_info .blue span {display: block; font-size: 14px; color:#2b64cf;}
.myresveration_area .middle .detail { position: absolute; right: 20px; bottom:auto; top:10px; padding:3px 9px; border: 1px solid #115dee; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; box-shadow: 1px 0 2px rgba(0,0,0,0.36); font-size: 12px;}

.myresveration_area .my_review_area { margin: 5px 20px 10px;}
.myresveration_area .my_review_area .top {display: flex; padding-top: 15px; justify-content: space-between; border-top: 1px solid #ccc;}
.myresveration_area .my_review_area .top .title {color: #333; font-weight: 550;}
.myresveration_area .my_review_area .middle {padding: 0; margin-top: 5px;}
.myresveration_area .my_review_area .middle p {line-height: 1.5;}
.myresveration_area .my_review_area .input {position: relative; border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; }
.myresveration_area .my_review_area .input input{padding: 0 40px 0 20px; background:#f8f8f8;}
.myresveration_area .my_review_area .input button { position: absolute; top:50%; right: 10px; width: 20px; height: 20px; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; }
.myresveration_area .my_review_area .input button img {width: 100%;}

/* layer */
.layer_bg {position: relative;}
.layer_wrap {position: fixed; top:0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10;}
.layer_wrap .layer_area { overflow: auto; position: absolute; top: 50%; left: 50%; width: 95%; padding: 20px; background: #fff; transform:translate(-50%, -50%) ; -webkit-transform:translate(-50%, -50%) ; -moz-transform:translate(-50%, -50%) ; -ms-transform:translate(-50%, -50%) ; -o-transform:translate(-50%, -50%) ; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px;  }
.layer_wrap .layer_area { overflow: hidden; height: 90%!important;  padding: 20px 20px 40px 20px;}
.layer_wrap .layer_area .top {position: relative; height: 20px; text-align: right;}
.layer_wrap .layer_area .img_area { margin-top: 20px; overflow: hidden; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px ; }
.layer_wrap .layer_area .img_area img {width: 100%;}
.layer_wrap .layer_area .text_area {margin-top: 20px;}
.layer_wrap .layer_area .text_area .bold {color: #333; font-size: 14px;}
.layer_wrap .layer_area .text_area .ellipsis {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: unset; color: #333;}
.layer_wrap .layer_area .text_area p {margin-top: 5px;}
.layer_wrap .layer_area .text_area p.black {color: #333;}
.layer_wrap .layer_area .text_area .normal {color: #333; margin-top: 10px;}
.layer_wrap .layer_area .text_area .list  {margin-top: 30px;}
.layer_wrap .layer_area .text_area .list span {display: block; color: #333; font-size: 16px; font-weight: 600;}
.layer_wrap .layer_area .text_area .list li {margin-top: 10px; padding-left: 20px; background: url('../images/icon_list_arrow.png') no-repeat left center;}
.layer_wrap .layer_area .com_btn {position: static; margin-top: 40px; padding: 0;}
.layer_wrap .layer_area .com_btn { position: absolute; left: 50%; width: 90%; transform:translateX(-50%) ; bottom: 0; -webkit-transform:translateX(-50%) ; -moz-transform:translateX(-50%) ; -ms-transform:translateX(-50%) ; -o-transform:translateX(-50%) ; }
.layer_wrap .layer_area .com_btn button {display: flex; justify-content: space-between; align-items: center; padding: 0 20px;} 
.layer_wrap .layer_area .com_btn.normal button {display: block; text-align: center;}
.layer_area .top.flex {display: flex; align-items: center; justify-content: space-between;}
.layer_wrap .layer_area .com_btn.mormal button {display: block; width: 100%; text-align: center;}
.layer_wrap .layer_area .com_btn.v2 {bottom: 20px; margin-top: 0;}
.layer_wrap .layer_area .com_btn.v2 button {display: block; width: 50%; text-align: center;}
.layer_wrap .layer_area .com_btn.v2 button span {margin: 0 5px;}
.layer_wrap .layer_area .com_btn.v2 button.red {background: #b82958;}
.layer_area .top.flex .bold {color: #333; font-size: 18px;}
.layer_area .top.flex + .content {margin-top: 20px;}
.layer_area .top.flex + .content p {margin-top: 10px; color: #333;}
.layer_area .top.flex + .content p > span {color: #2b64cf;}
.layer_wrap .maintain_area {position: relative; padding: 0 0 20%; height: 40vh; min-height: unset;}

.layer_wrap .private_text strong {font-size: 20px; color: #333;}
.layer_wrap .private_text .text_area span {display: block; color: #333;}
.layer_wrap .private_text .text_area .title {margin-bottom: 15px;}


/* input file 추가 */
input[type="file"] {position: absolute;width: 0;height: 0;padding: 0; overflow: hidden; border: 0;}

/* 레이어 팝업 버튼 위치 조정 */
@media all and (max-width:376px) { 
	.layer_wrap .maintain_area {height: 20vh; padding: 0 0 5%;}
}

@media all and (max-width:360px) { 
	.layer_wrap .maintain_area {height: 30vh; padding: 0 0 10%;}
}


@media all and (max-width:344px) { 
	.layer_wrap .maintain_area {height: 40vh; }
}

@media all and (max-width:320px) {
	.layer_wrap .maintain_area {height: 50vh; }
	.maintain_area .box_maintain .text_maintain {width: calc(100% - 44%);}
	
}