@charset "utf-8";

/* dialog */
.dialog-wrap{ width:100%; height:100%; display:none; position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0, 0, 0, .3); z-index:9999; }

.dialog-container{ max-width:calc( 100% - 40px ); display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.dialog-loading .dialog-content{ padding:40px; text-align:center; }
.dialog-loading .dialog-content .dialog-ani{ font-size:0; }
.dialog-loading .dialog-content .dialog-ani > span{ width:20px; height:20px; margin:0 10px; display:inline-block; position:relative; background-color:#C4C4C4; border-radius:50%; }
.dialog-loading .dialog-content .dialog-ani > span:nth-child(2){ background-color:#FFDA50; }
.dialog-loading .dialog-content .dialog-ani > span:nth-child(3){ background-color:#F77B28; }
.dialog-loading .dialog-content .dialog-ani > span:after{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-color:#C4C4C4; border-radius:50%; animation:aniLoading 1.7s cubic-bezier(.35, .7, .69, .37) infinite; }
.dialog-loading .dialog-content .dialog-ani > span:nth-child(2):after{ background-color:#FFDA50; animation-delay:.2s; }
.dialog-loading .dialog-content .dialog-ani > span:nth-child(3):after{ background-color:#F77B28; animation-delay:.4s; }
.dialog-loading .dialog-content .dialog-txt{ margin-top:30px; font-size:28px; font-weight:700; color:#fff; }
 
@keyframes aniLoading{
    50%, 75%{ transform:scale(2); }
    80%, 100%{ opacity:0; }
}


/* modal */
.modal-wrap{ display:none; position:fixed; top:0; bottom:0; left:0; right:0; z-index:9999; }
.modal-wrap .modal-bg{ position:absolute; top:0; bottom:0; left:0; right:0; background-color:#282828; opacity:.3; filter:alpha(opacity=30); z-index:-1; }

.modal-container{ width:100%; height:100%; display:none; justify-content:center; align-items:center; }
.modal-container .modal-layout{ width:486px; max-width:calc( 100% - 32px ); max-height:calc( 100% - 32px ); display:flex; background-color:#fff; box-shadow:0 20px 16px rgba(0, 0, 0, .2); flex-direction:column; }
.modal-container .modal-header{ padding:16px; display:flex; position:relative; align-items:flex-start; flex:none; }
.modal-container .modal-header .tit-dep4{ margin:0 10px 0 0; position:initial; font-weight:700; }
.modal-container .modal-header .tit-dep4:after{ content:''; height:1px; background-color:#282828; position:absolute; left:16px; right:16px; bottom:0; }
.modal-container .modal-header .btn-close{ margin-left:auto; }
.modal-container .modal-content{ padding:16px; flex:1; overflow-x:hidden; overflow-y:auto; transform:none; perspective:none; }
.modal-container .modal-btn{ padding:16px; display:flex; justify-content:center; align-items:center; flex:none; }
.modal-container .modal-btn > *:not(:first-child){ margin-left:8px; }

.modal-L .modal-layout{ width:1080px; }

/* search site */
.modal-search-site .list-site{ margin-bottom:0; }
.modal-search-site .list-site > ul{ margin:-8px -8px 0; }
.modal-search-site .list-site > ul > li{ width:calc( 100% - 24px ); margin:8px; }
.modal-search-site .list-site > ul > li .tit-area{ margin-top:0; -webkit-line-clamp:1; }

/* profile update */
.modal-profile-update .modal-content{ padding-bottom:40px; word-break:keep-all; }
.modal-profile-update .modal-content .tit-dep4{ margin-bottom:16px; }
.modal-profile-update .modal-content .btn-area{ margin:24px auto 16px; }
.modal-profile-update .modal-btn{ border-top:1px solid #E9E9E9; justify-content:flex-start; }
.modal-profile-update .modal-btn .input-checkbox{ font-size:14px; }

/* agree */
.modal-agree .modal-content > [class^='tit']:first-child{ margin-top:0; }
.modal-agree .box-gray{ padding:16px; background-color:#F5F6FA; border:1px solid #282828; }
.modal-agree .tit-dep3{ margin:40px auto 16px; }
.modal-agree .tit-dep4{ margin:16px auto 8px; }
.modal-agree .list-agree{ margin:8px auto 16px; }
.modal-agree .list-agree > li{ margin:8px auto; }
.modal-agree .list-agree > li > .list-agree{ margin:4px auto 8px; padding-left:16px; }

/* address */
.modal-address .modal-content{ padding:0 16px; }
.modal-address .list-type2{ margin:0 auto; }

/* coupon */
.modal-coupon .modal-content{ padding:0 16px; }
.modal-coupon .list-type2{ margin:0 auto; }

/* add site */
.modal-add-site .modal-content .txt-center{ font-size:16px; }

/* pass */
.modal-pass .no-data{ min-height:150px; }
.modal-pass .modal-content{ padding:16px 16px 32px; }
.modal-pass .modal-content .no-data{ margin-top:40px; }
.modal-pass .modal-btn{ background-color:#F7F7F7; }
.modal-pass .modal-btn .no-data{ min-height:56px; padding:0; background-color:#fff; }
.modal-pass .modal-btn .select-layout{ margin-right:24px; flex:1; }
.modal-pass .modal-btn .select-layout .tit-select{ font-size:16px; font-weight:700; }
.modal-pass .modal-btn .select-layout .tit-dep4{ margin-bottom:16px; }
.modal-pass .modal-btn .select-layout .list-product{ padding:0 16px; max-height:150px; background-color:#fff; border:1px solid #C4C4C4; overflow-x:hidden; overflow-y:auto; }
.modal-pass .modal-btn .select-layout .list-product > ul{ margin:0 -8px; font-size:0; overflow:hidden; }
.modal-pass .modal-btn .select-layout .list-product > ul > li{ width:calc( 100% - 16px ); margin:0 8px; padding:16px 0; display:inline-flex; border-bottom:1px solid #E9E9E9; font-weight:500; font-size:16px; }
.modal-pass .modal-btn .select-layout .list-product > ul > li:last-child{ border-bottom:none; }
.modal-pass .modal-btn .select-layout .list-product > ul > li .btn-del{ margin-left:auto; }
.modal-pass .modal-btn .btn-L{ margin:auto 0 0 auto; }

/* answer */
.modal-answer .form-type1{ margin-top:40px; padding-bottom:16px; }
.modal-answer .form-type1 > dl > dd > .btn{ width:100%; }

/* faq */
.modal-faq .tab-type2{ margin:24px auto 8px; }
.modal-faq .tab-content{ margin-top:8px; }

/* alert */
.modal-alert .modal-content{ padding-bottom:40px; word-break:keep-all; }
.modal-alert .modal-content .tit-dep4{ margin-bottom:16px; }
.modal-alert .modal-content .btn-area{ margin-top:24px; }

/* review-view */
.modal-review-view .view-type1 .info-area .name{ margin-top:8px; }
.modal-review-view .view-type1 .content-area{ margin-top:32px; }
.modal-review-view .view-type1 .list-images > ul{ margin:16px -8px 0; display:flex; }
.modal-review-view .view-type1 .list-images > ul > li{ margin:0 8px; flex:1; }
.modal-review-view .view-type1 .list-images > ul > li .img-area{ padding-bottom:56.25%; position:relative; background-color:#F5F6FA; }
.modal-review-view .view-type1 .list-images > ul > li .img-area > img{ max-width:100%; max-height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); overflow:hidden; }

.modal-review-view .list-product{ margin-top:32px; }
.modal-review-view .list-product > li{ padding:16px; display:flex; border:1px solid #282828; border-radius:8px; }
.modal-review-view .list-product > li .input-checkbox{ margin:auto 0; }
.modal-review-view .list-product > li .tit-area{ margin:0 24px 0 0; display:flex; align-items:center; flex:1; }
.modal-review-view .list-product > li .tit-area .img-area{ width:152px; margin-right:16px; border-radius:8px; overflow:hidden; }
.modal-review-view .list-product > li .tit-area .tit{ flex:1; }
.modal-review-view .list-product > li .tit-area .tit .tit-dep4{ overflow:hidden; text-overflow:ellipsis; word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.modal-review-view .list-product > li .tit-area .sticker-area{ margin-top:8px; }
.modal-review-view .list-product > li .price-area .price{ margin-left:0; }