/* 메인컬러 : #FE3368 */

html, body { margin:0px; height:100%; }
body { overflow-y:scroll; }
table { width:100%; }
.container { padding:0px; }
.bgcss { background-color:#FF3170; color:#FFF; border:0px; }

.modal {
  overflow: auto;
}

xbutton { border:0px !important; outline:0px !important; }

:root {
	--container-width: 400px;
}

@media all and (min-width:1024px){ /* 데스트탑 */
	.container {
		width:var(--container-width);
		position:relative;
		border:1px solid #f1f1f1;
	}

	.container-width {
		width:var(--container-width);
	}
} 
@media all and (min-width:768px) and (max-width:1023px){ /* 테블릿 */
	.container {
		width:var(--container-width);
		position:relative;
		border:1px solid #f1f1f1;
	}

	.container-width {
		width:var(--container-width);
	}
} 
@media all and (max-width:767px){ /* 모바일 */
	.container-width {
		width:100%;
	}
}

/*
fieldset
{
	border: 1px solid #ddd !important;
	margin: 10px 0px;
	padding: 10px;      
	position: relative;
	border-radius:4px;
	background-color:#f5f5f5;
	padding-left:10px! important;
}
*/

legend
{
	font-size:14px;
	font-weight:bold;
	margin-bottom: 0px;
	width: auto;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 5px 10px;
	background-color: #ffffff;
}

th, td { xvertical-align:middle !important; }

a { color:#333; text-decoration: none; }
a:hover, a:focus, a:active { text-decoration: none;}

.no-scroll {
	-ms-overflow-style: none; /* IE, Edge */
	scrollbar-width: none; /* Firefox */
}
.no-scroll::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

iframe { max-width:100%; }

/****************************** 모달 ******************************/
/* 모달 오픈시 스크롤 막기 */
.hidden2 {height:100%; min-height:100%; touch-action:none;}

/* wrap */
.gs-modal-css { xdisplay:none; position:absolute; top:0; left:0; z-index:10000; width:100%; min-height:100%; min-height: 100vh; }

/* dimmed */
.gs-modal-css .dimmed { position:fixed; top:0; left:0; width:100%; min-height:100%; min-height: 100vh; background:#000; opacity:.2; filter:alpha(opacity=20); }

/* modal */
.gs-modal-css .modal-container { position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); background-color:#FFF; border-radius:7px; }
@media all and (min-width:1024px) {
	.gs-modal-css .modal-container { width:calc(var(--container-width) - 30px); }
} 
@media all and (min-width:768px) and (max-width:1023px) {
	.gs-modal-css .modal-container { width:90%; }
} 
@media all and (max-width:767px) {
	.gs-modal-css .modal-container { width:90%; }
}

/* body */
.gs-modal-css .header { color:#FE3368; font-weight:bold; font-size:20px; border-bottom:3px solid #FE3368; padding:15px; text-align:center; }
.gs-modal-css .body { color:gray; font-weight:bold; font-size:15px; padding:10px 0px; text-align:center; /* border-bottom:1px solid #D4D4D4; */ }
.gs-modal-css .confirm, .gs-modal-css .confirm td { padding:15px; text-align:center; color:gray; font-size:17px; cursor:pointer; }
.gs-modal-css .confirm td:nth-child(1) { border-right:1px solid #D4D4D4; }





/****************************** 모달 커스텀 ******************************/
/* wrap */
.gs-modal-nocss { xdisplay:none; position:absolute; top:0; left:0; z-index:10000; width:100%; min-height:100%; min-height: 100vh; }

/* dimmed */
.gs-modal-nocss .dimmed { position:fixed; top:0; left:0; width:100%; min-height:100%; min-height: 100vh; background:#000; opacity:.2; filter:alpha(opacity=20); }

/* modal */
.gs-modal-nocss .modal-container { position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); background-color:#FFF; border-radius:7px; }
@media all and (min-width:1024px) {
	.gs-modal-nocss .modal-container { width:calc(var(--container-width) - 30px); }
} 
@media all and (min-width:768px) and (max-width:1023px) {
	.gs-modal-nocss .modal-container { width:90%; }
} 
@media all and (max-width:767px) {
	.gs-modal-nocss .modal-container { width:90%; }
}

/* body */
.gs-modal-nocss .header { color:#FE3368; font-weight:bold; font-size:20px; border-bottom:3px solid #FE3368; padding:15px; text-align:center; }
.gs-modal-nocss .body { /* border-bottom:1px solid #D4D4D4; */ }
.gs-modal-nocss .confirm, .gs-modal-nocss .confirm td { padding:15px; text-align:center; color:gray; font-size:17px; cursor:pointer; }
.gs-modal-nocss .confirm td:nth-child(1) { border-right:1px solid #D4D4D4; }




/* 리스트 */
.list-box { padding:15px 15px 0px 15px; }
.list-box .photo { width:40px; height:40px; border-radius:100px; }
.list-box .profile { padding-left:10px; }
.list-box .more { font-size:22px; cursor:pointer; }
.list-box .title { font-size:18px; margin:10px 0px; }
.list-box .content { font-size:15px; margin:10px 0px; }
.list-box button { border:1px solid #E0E1E6; padding:5px 10px; background-color:#F1F2F6; border-radius:5px; }
.list-box .etc { margin:15px 0px; }
.list-box .etc td { text-align:center; width:25%; }
.list-box .number { font-size:17px; }
.list-box .reply-cnt { color:red; }
.list-box .etc-gray { color:#B9B9B9; }

/* 리스트 포토2 */
.list-box-photo2 { padding:10px 10px 10px 0px; }
.list-box-photo2 .reply-cnt { color:red; }
.list-box-photo2 .etc-gray { color:#B9B9B9; }
.list-box-photo2 .title {
	margin-left:10px;
	line-height:27px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break:break-all;
	display:inline-block;
	/*width:200px;*/
	width: calc(100% - 10px);
}
.list-box-photo2 .row-line { padding:10px 0px; }
.list-box-photo2 .row-line div { border:1px solid #EEEEEE; }

/* 리스트 ajax */
.list-loading { padding:50px; }
.list-empty { padding:50px; }

/* 댓글 */
.reply-box { padding:0px 15px; }
.reply-box .photo { width:60px; height:60px; border-radius:100px; }
.reply-box .profile { padding-left:10px; }
.reply-box .content { font-size:15px; background-color:#F0F1F5; padding:10px; border-radius:10px; color:#000; }
.reply-box .content .content-box { padding:10px 0px 0px 0px; }
.reply-box .content .content-box button { margin:0px 1px; }
.reply-box .etc { width:auto; margin:10px 0px; }
.reply-box .etc td { text-align:center; width:25%; padding:0px 5px; }
.reply-box .sort-box { margin:10px 0px; }
.reply-box .sort-box span { cursor:pointer; }
.reply-box .sort-box span:nth-child(2) { margin-left:5px; }
.reply-box .sort-box span strong { font-size:20px; }
.reply-box .sort-box span.active { font-weight:bold; font-size:16px; }
.reply-box .sort-box span.active > strong { color:red; }
.reply-box .comment_choice { border:1px solid #FE3368; }
.reply-box .bestbox { background-color:#FFF3F3 !important; color:#FE3368 !important; font-weight:bold; }

/* 탭 */
.tab td { width:50%; padding:11px; text-align:center; font-weight:bold; font-size:17px; border-bottom:2px solid #e1e1e1; cursor:pointer; }
.tab .active { border-bottom:2px solid #FF3170; color:#FF3170; }

/* 버튼 */
.btn-pink-bg { background-color:#FE3368; color:#FFF; padding:5px 10px; border:2px solid #FE3368; border-radius:5px; }
.btn-pink-font { background-color:#FFF; color:#FE3368; padding:5px 10px; border:2px solid #FE3368; border-radius:5px; text-align:center; }
.btn-black { background-color:#000; color:#FFF; padding:5px 10px; border-radius:5px; }
.btn-gray { background-color:gray; color:#FFF; padding:5px 10px; border-radius:5px; border:2px solid gray; }
.btn-bottom { position:fixed; bottom:0px; line-height:50px; text-align:center; font-size:17px; font-weight:bold; cursor:pointer; }
.btn-margin { margin:50px 0px; }
.photos-btn-box button { background-color:#FE3368; color:#FFF; border:0px; padding:2px 10px; border-radius:5px; }

/* 폼 */
.btn-100 { width:100%; margin:10px 0px 0px 0px; padding:20px; background-color:#EA486A; color:#FFF; font-weight:bold; font-size:18px; border:0px; }

.input-box { margin-top:10px; }
.input-box .input-div { margin-top:30px; }
.input-box .title { font-weight:bold; font-size:15px; }
/*.input-box input[type='text'],input[type='tel'],input[type='password'],input[type='number'],input[type='file'] {*/
.input-box input{
	border:0px; width:100%; xmargin-top:5px; border-bottom:1px solid #e1e1e1; line-height:35px; font-size:16px; outline:none;
}
.check-big1 { width:20px; height:20px; vertical-align:-5px; }
.check-big2 { width:30px; height:30px; vertical-align:-10px; }

.input-box input[type="checkbox"]{
	display: none;
}
.input-box .label-text { margin-left:10px; }
.input-box input[type="checkbox"] + label{ /* 기본 CSS */
	display: inline-block;
	width: 25px;
	height: 25px;
	border:0px;
	background-color:#BBBBBB;
	border-radius:20px;
	cursor:pointer;
	vertical-align:3px;
	text-align:center;
}
.input-box input[type="checkbox"] + label:after{ /* checked 되기전 내용 */
	content:'✔';
	color:#FFF;
	vertical-align:-2px;
}
.input-box input[type="checkbox"]:checked + label{ /* checked 된후 */
	background-color:#FE3368;
}
.input-box input[type="checkbox"]:checked + label::after{ /* checked 된후의 내용 */
	content:'✔';
	vertical-align:-2px;
}
.input-box .agree-view { color:#d2d2d2; font-size:13px; padding-top:5px; }

/* 기타 */
.line { background-color:#F1F2F6; height:10px; }
.line-thin { background-color:#F1F2F6; height:2px; margin:20px 0px; }
.line-thin-nomar { background-color:#F1F2F6; height:2px; }
.line-thin-nomar2 { background-color:#F1F2F6; height:1px; }

/* 리스트 */
.my-list td { padding:15px; border-bottom:1px solid #e1e1e1; cursor:pointer; }
.my-list .icon { width:60px; text-align:center; }
.my-list i { font-size:25px; }
.my-list .title { padding:0px; font-size:16px; color:#000; font-weight:bold; }
.my-list .title span { font-size:14px; color:gray; }
.my-list .angle { width:50px; text-align:center; }

/* 페이징(부트스트랩 기본 페이징을 important) */
.paging a { background-color:#FFF !important; border:1px solid #FE3368 !important; color:#FE3368 !important; }
.paging .active a { background-color:#FE3368 !important; color:#FFF !important; }
.pagination { margin:10px 0px; }

/* 토글 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider7 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider7:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider7 {
  background-color: #FE3368;
}
input:focus + .slider7 {
  box-shadow: 0 0 1px #FE3368;
}
input:checked + .slider7:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider7.round {
  border-radius: 34px !important;
}
.slider7.round:before {
  border-radius: 50% !important;
}
label.switch{margin:0px;}

/* 기타등등... */
.gps-msg { text-align:center; font-size:18px; margin:30px 0px; }
.gs-coming { text-align:center; padding:20px 0px; font-weight:bold; font-size:25px; }

/* 아이콘 */
.best-icon { background-color:#FE3368; color:#FFF; padding:5px; }

/* 상단 카테고리 */
.top-navi3 { background-color:#F1F2F6; padding:10px; }
.top-navi3 button { border:1px solid #ccc; padding:10px; background-color:#FFF; height:40px; border-radius:5px; }
.top-navi3 .btn-box { overflow-x:auto; width:100%; white-space: nowrap }
.top-navi3 .btn-box button { margin:0px 3px; }
.top-navi3 .btn-box button.active { background-color:#000; color:#FFF; }
.top-navi3 .sort { width:30px; }
















/* 팝업창(gs-modal) 제목 영역 스타일 */
.gs-modal .header {
    font-size: 17px !important;   /* 제목 글씨 크기 (원하는대로 조절) */
    
    /* 제목 아래 분홍색 라인 */
    border-bottom: 2px solid #FF3170 !important; /* 라인 두께 */
}


.gs-modal .modal-container {
    overflow: hidden;
}

.gs-modal-css .body {
    border-bottom: none !important;
}

/* 쪽지 보내기 팝업의 메시지 입력칸 placeholder 스타일 수정 */
#drink_message_form textarea.form-control::placeholder {
    color: #999999;        /* 글자 색상을 원하시는 회색으로 변경 */
    font-weight: normal;   /* 글자 굵기를 보통(굵지 않게)으로 변경 */
}

/* 팝업 하단 전체 영역을 Flexbox 컨테이너로 설정 */
.gs-modal .footer {
    display: flex; /* Flexbox 레이아웃 활성화 */
    gap: 10px;     /* 버튼 사이의 간격을 10px로 설정 */
    padding: 0 10px 10px 10px; /* 팝업창 가장자리와의 여백 */
    border-top: none !important;
}

/* 각각의 버튼 공통 스타일 */
.gs-modal .footer .btn-confirm,
.gs-modal .footer .btn-cancel {
    flex: 1; /* 두 버튼이 공간을 1:1 비율로 똑같이 나눠가짐 */
    color: white;
    font-weight: bold;
    padding: 7px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

/* 확인 버튼 배경색 */
.gs-modal .footer .btn-confirm {
    background-color: #20B2AA; 
}

/* 취소 버튼 배경색 */
.gs-modal .footer .btn-cancel {
    background-color: #FF3170;
}