@charset 'utf-8';

/* =======================================================
 	modal
========================================================*/
.modal-container {display:none; position: fixed; top: 0; left: 0; z-index: 500; width: 100%; height: 100%; }
.modal-container .dimlayer {position: absolute; top: 0; left: 0; z-index: 600;width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.modal-contents {position: absolute; top: 50%; left: 50%; z-index: 700; width: 500px; height: 500px; border-radius: 0; background-color: #fff; transform: translate(-50%, -50%); }

.modal-header {position: relative; height: 50px; padding: 0 15px; border-bottom: 1px solid #eee; box-sizing: border-box; }
.modal-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-header .modal-title {float: left; width: calc(100% - 30px); color: #000; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; line-height: 49px; overflow: hidden; } 
.modal-header .modal-close {float: right; width: 30px; height: 49px; background-image: url("/AppData/images/site/button/modal_close.png"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center right; }

.modal-body {height: 450px; overflow-y: scroll; padding: 20px 15px; box-sizing: border-box; }
.modal-body:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }



/* 공유하기 modal-share 
-----------------------------------------------------*/
.modal-share .modal-contents {width: 320px; height: 400px; }
.modal-share .modal-body {height: auto; overflow-y: auto; }
.modal-share .share-wrapper {position: relative; width: 100%; }

.modal-share .share-list {}
.modal-share .share-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-share .share-list { }
.modal-share .share-list li {display: table-cell; width: 1%; }
.modal-share .share-list li:first-child {margin-right: 0; }

.modal-share .btn-sns {width: 100%; margin: 0 auto; text-align: center; }
.modal-share .btn-sns .icon {display: block; width: 40px; height: 40px; margin: 0 auto; border-radius: 999px; background-repeat: no-repeat; background-size: contain; }
.modal-share .btn-sns span {display: inline-block; margin-top: 8px; font-size: 12px; color: #444; word-break: keep-all; }

.modal-share .fm--input-btn-group {margin-top: 20px; }
.modal-share .fm--input-btn-group .fm--input-text {float: left; width: calc(100% - 88px); }
.modal-share .fm--input-btn-group .fm--btn {width: 80px; }






/* =======================================================
	bpopup
========================================================*/
.fm--bpopup {display: none; background-color: #fff; border-radius: 5px; box-shadow: 0px 3px 12px 5px rgba(7, 7, 7, 0.2); box-sizing: border-box; font-family: 'NotoSansKR', Apple SD Gothic Neo, 돋움, dotum, sans-serif; font-weight: 400; font-style: normal; font-stretch: normal; font-size: 16px; line-height: 1.46; letter-spacing: 0.28px; color: #222; word-break: break-all; word-wrap: break-word; white-space: normal; }



/* 메인 팝업 이미지 */
.fm--bpopup-banner {width: 300px; height: 400px; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; }
.fm--bpopup-banner .fm--bpopup-body a,
.fm--bpopup-banner .fm--bpopup-body img {display: block; width: 100%; height: 100%; min-width: 300px; min-height: 350px; max-width: 300px; max-height: 350px; }

.fm--bpopup-banner .fm--bpopup-footer {width: 100%; height: 50px; padding: 8px 8px; border-top: 1px solid #d3d3d3; box-sizing: border-box; }
.fm--bpopup-banner .fm--bpopup-footer:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.fm--bpopup-banner .fm--bpopup-footer > button {float: left; width: 50%; height: 30px;box-sizing: border-box; font-size: 14px; color: #6f6f6f; }
.fm--bpopup-banner .fm--bpopup-footer > button + button {border-left: 1px solid #d3d3d3; }



/* 이용약관 동의 */
.fm--bpopup-terms {max-width: 600px; width: 90%; height: 437px; background-color: #fff; overflow: hidden; }

.fm--bpopup-terms .fm--bpopup-header {padding: 16px 16px; box-sizing: border-box; border-bottom: 1px solid #eee; }
.fm--bpopup-terms .fm--bpopup-header:after {content: ""; clear: both; display: block; }

.fm--bpopup-terms .fm--bpopup-header .fm--bpopup-title {float: left; font-size: 18px; font-weight: 500; color: #222; }
.fm--bpopup-terms .fm--bpopup-header .fm--btn-close {float: right; font-size: 13px; line-height: 26px; }

.fm--bpopup-terms .fm--bpopup-body {padding: 16px 0; border-bottom: none; box-sizing: border-box; }

.fm--bpopup-terms .fm--agreement-terms {width: 100%; height: 280px; padding: 0 16px; overflow: hidden; overflow-y: scroll; border: none; box-sizing: border-box; font-size: 13px; color: #6f6f6f; white-space: normal; word-break: break-all; }

.fm--bpopup-terms .fm--check-group {margin: 0 auto; margin-top: 8px; margin-bottom: 24px; }
.fm--bpopup-terms .fm--check-group:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.fm--bpopup-terms .fm--btn-bottom-group {margin: 16px auto 0; padding: 0 16px 0; border-top: 0; text-align: center; }
.fm--bpopup-terms .fm--btn-bottom-group .fm--btn {float: none; width: 100%; height: 45px; line-height: 43px; }

/* 사이트 설명 */
.fm--bpopup-site {width: 300px; height: 437px; background-color: #fff; overflow: hidden; }

.fm--bpopup-site .fm--bpopup-header {padding: 16px 16px; box-sizing: border-box; border-bottom: 1px solid #eee; }
.fm--bpopup-site .fm--bpopup-header:after {content: ""; clear: both; display: block; }

.fm--bpopup-site .fm--bpopup-header .fm--bpopup-title {float: left; font-size: 18px; font-weight: 500; color: #222; }
.fm--bpopup-site .fm--bpopup-header .fm--btn-close {float: right; }

.fm--bpopup-site .fm--bpopup-body {padding: 16px 16px; border-bottom: none; box-sizing: border-box; }

.fm--bpopup-site .fm--agreement-site {width: 100%; height: 280px; padding: 0; overflow: hidden; overflow-y: scroll; border: none; box-sizing: border-box; font-size: 13px; color: #6f6f6f; white-space: normal; word-break: break-all; }

.fm--bpopup-site .fm--check-group {margin: 0 auto; margin-top: 8px; margin-bottom: 24px; }
.fm--bpopup-site .fm--check-group:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.fm--bpopup-site .fm--btn-bottom-group {margin: 16px auto 0; padding: 0; text-align: center; }
.fm--bpopup-site .fm--btn-bottom-group .fm--btn {float: none; width: 100%; height: 50px; line-height: 48px; }










/*=================================================================
  media query
=================================================================*/
@media (min-width: 320px) and (max-width: 374px) {
	.fm--bpopup-banner {width: 280px; height: 345px; }
	.fm--bpopup-banner .fm--bpopup-body a,
	.fm--bpopup-banner .fm--bpopup-body img {min-width: 280px; min-height: 295px; max-width: 280px; max-height: 295px; }
}


@media (min-width: 768px) {

  .fm--bpopup-site {width: 600px; height: 437px; }

}