.hide { display: none !important; }
.pointer {
	cursor: pointer !important;
}
.not-allowed {
	cursor: not-allowed !important;
}
.nonVisible {
	visibility: hidden !important;
}
:root {
	--fontopen-height: calc(100% - 47px); /* 기본값 */
}

.preview ul {height:Calc(100% - 40px); overflow-y:scroll; padding:30px 35px;}
.preview ul::-webkit-scrollbar {display: none;}
.preview ul li {color:#BFBFBF; font-size:12px; text-align: center; margin-bottom:30px; cursor:pointer; font-weight:300;}
.preview ul li:last-child {margin-bottom:0;}
.preview ul li .img {width:100%; padding-top:142%; background:url('../img/bg.jpg')no-repeat center #fff; background-size:Cover; margin-bottom:8px;}
.preview ul li.on {color:#111; font-weight:500;}
.preview ul li.on .img {border:1px solid #111;}
.preview .add_letter {width:100%; height:40px; background:#111; font-size:14px; color:#fff; border:none; font-weight:500;}

.preview2 .preview_open1 {height:45px; font-size:14px; color:#111; font-weight:500; padding:0 35px; width:100%; background:#fff; border:none; text-align: left;}
.preview2 .preview_open1:after {content:''; clear:both; display: table;}
.preview2 .preview_open1 img {float:right; margin-top:-1px;}
/*.preview2 ul {height:Calc(100% - 85px);}*/
.preview2 ul {height:Calc(100% - 50px);}

.preview3 .preview_open1 {height:45px; font-size:14px; color:#111; font-weight:500; padding:0 35px; width:100%; background:#fff; border:none; text-align: left; border-top:1px solid #e4e4e4;}
.preview3 .preview_open1:first-child {border-top:none;}
.preview3 .preview_open1:after {content:''; clear:both; display: table;}
.preview3 .preview_open1 img {float:right; margin-top:-1px;}
.preview3 ul.ul1 {height:Calc((100% - 175px) / 2 + 100px);}
.preview3 ul.ul2 {height:Calc((100% - 85px) / 2 - 100px);}
.preview3 ul.ul2 li {margin-bottom:20px;}
.preview3 ul.ul2 li .img {padding-top:150%; background:#fff;}


.content .editor {height:47px; border-bottom:1px solid #e8e8e8;}
.content .editor:after {content:''; clear:both; display: table;}
.content .editor .select {cursor: pointer; float:left; width:100%; height:46px;  position: relative; z-index: 1;}
.content .editor .select .label {width:100%; text-align:left; border:none; height:46px; padding-left: 18px; background: none; cursor: pointer; font-size:14px; padding-bottom:1px; color:#111; background:url('../img/sel_down.svg')no-repeat center right 15px; font-weight:400;}
.content .editor .select .optionList {position: absolute; top:51px; left: 0px; width: 100%;  max-height: 0; transition: .3s ease-in;   z-index: 1;   overflow:hidden; font-weight:400; border:1px solid rgba(0,0,0,0)}
.content .editor .select.active .optionList {max-height: 170px;overflow:auto; background:#fff; border:1px solid #e8e8e8; padding:6px 0;}
.content .editor .select .optionItem { padding:8px 17px 8px 18px; font-size:14px; color:#111; font-weight:400;}
.content .editor .select .optionList::-webkit-scrollbar {width: 6px;}
.content .editor .select .optionList::-webkit-scrollbar-thumb {background:  none; border-radius: 45px;}

.content .editor .family_box {float:left; max-width:350px; width:calc(100% - 770px);}
.content .editor .family_box span {display: inline-block; width:46px; height:45px; border-right:1px solid #e8e8e8; text-align: center;  padding:13px 0; float:left;}
.content .editor .family_box button {float:left; width:calc(100% - 46px); height:45px; border:none; background:#fff; text-align: left; padding:0 25px 2px 16px; font-size:14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative;}
.content .editor .family_box button img {position: absolute; right:15px; top:20px; transform: rotate(0deg); transition: .3s;}
.content .editor .family_box button.on img {transform: rotate(180deg);}

.content .editor .size_box {float:left; width:105px; border-left:1px solid #e8e8e8}

.content .editor .style_box {float:left; width:272px; padding:8px 15px; border-left:1px solid #e8e8e8;}
.content .editor .style_box:after {content:''; clear:both; display: table;}
.content .editor .style_box button {float:left; width:30px; height:30px; border-radius:5px; background:none; border:none; margin-right:12px; transition: .5s; border:1px solid #fff;}
.content .editor .style_box button:last-child {margin-right:0;}
.content .editor .style_box button:hover {background:#f3f3f3; border:1px solid #f3f3f3}
.content .editor .style_box button.on {border:1px solid #111; background:#fff;}

.content .editor .spacing_box {float:left; width:115px; border-left:1px solid #e8e8e8}
.content .editor .spacing_box:after {content:''; clear:both; display: table;}
.content .editor .spacing_box img {float:left; margin-left:16px; margin-top:14px;}
.content .editor .spacing_box input[type="text"] {float:left; height:45px; border:none; font-size:14px; width:74px; padding-left:13px;}

.content .editor .fill_box {float:left; width:160px; height:46px; border-left:1px solid #e8e8e8; padding-left:18px;}
.content .editor .fill_box:after {content:''; clear:both; display: table;}
.content .editor .fill_box span {float:left; font-size:14px; color:#111 ;font-weight:500; line-height:46px;}
.clr-field {float:left; width:calc(100% - 18px) !important; padding-left:13px; }
.clr-picker {margin-left:-50px;}
.clr-field button {right:initial !important; left:13px; width:20px !important; height:20px !important; border:1px solid #ddd !important;}
.content .editor .fill_box input[type="text"] {width:100%; height:45px; border:none; background:none; font-size:14px; padding-left:25px;}

.content .editor .zoom_box {float:left; width:140px; height:46px; border-left:1px solid #e8e8e8; padding-left:10px;}
.content .editor .zoom_box:after {content:''; clear:both; display: table;}
.content .editor .zoom_box span {float:left; font-size:13px; color:#666 ;font-weight:500; line-height:46px; margin:0 11px;}
.content .editor .zoom_box button {float:left; width:27px; height:27px; border:1px solid #e4e4e4; background:#fff; border-radius:4px; font-size:13px; color:#777; margin-top:10px; transition: .3s;}
.content .editor .zoom_box button img {width:15px;
	opacity: .6; margin-top:-2px;}

.content .editor .emo_box {float:left; border-left:1px solid #e8e8e8; border-right:1px solid #e8e8e8; }
.content .editor .emo_box button {width:46px; height:46px; border:none; background:none;}

.content .editor .page {float:right; padding:15px 15px; font-size:13px; color:#a6a6a6; font-weight:300;}





.content .cont {width:100%; height:calc(100% - 47px); position: relative;}
.content .cont .font_preview {width:calc(100% - 770px); max-width:351px; height:100%; border-right:1px solid #e8e8e8; position: absolute; left:-351px; top:0; background:#fff; transition: .5s;}
.content .cont .font_preview .col {height:100%;}
.content .cont .font_preview .search {width:100%; position: relative;}
.content .cont .font_preview .search input[type="text"] {width:100%; height:46px; border:none; border-bottom:1px solid #e8e8e8; padding:0 46px 0 18px; font-size:14px ;color:#111;}
.content .cont .font_preview .search .search_bt {position: absolute; right:0; top:0; width:45px; height:45px; border:none ;background:none;}
.content .cont .font_preview ul {padding:8px; height:calc(100% - 46px); overflow-y: scroll;}
.content .cont .font_preview ul::-webkit-scrollbar {display: none;}
.content .cont .font_preview ul li {border:1px solid #e8e8e8; margin-bottom:10px; position: relative; transition: .3s; cursor: pointer;}
.content .cont .font_preview ul li:last-child {margin-bottom:0;}
.content .cont .font_preview ul li h3 {background:#f8f8f8; padding:12px 15px 10px 15px; font-size:15px; color:#111; font-weight:500; padding-right:50px;}
.content .cont .font_preview ul li h3 span {display: inline-block; width:100%; font-size:12px; color:#999; margin-top:0px; font-weight:300;}
.content .cont .font_preview ul li .star {position: absolute; right:16px; top:17px; border:none; background:none; filter:grayscale(100) opacity(0.6);}
.content .cont .font_preview ul li .star.on {filter:initial;}
.content .cont .font_preview ul li p {padding:15px; font-size:clamp(12px, 0.76vw, 13.5px); color:#111; font-weight:400; line-height:20px;}
.content .cont .font_preview ul li:hover {border:1px solid #999;}
.content .cont .font_preview ul li.on {border:1px solid #111;}
.content .cont .font_preview ul li.on h3 {background:#111; color:#fff;}
.content .cont .font_preview .f_prev_close {display: none;}


.content .cont .view {float:right; width:100%; height:100%; overflow-y: scroll; padding:40px 0; transition: .5s; overflow-x:hidden;}
.content .cont .view::-webkit-scrollbar {display: none;}
.content .cont .view ul {width:722px; margin:0 auto; }
.content .cont .view ul li {margin-bottom:40px; position: relative}
.content .cont .view ul li:last-child {margin-bottom:0;}
.content .cont .view ul li span {display: inline-block;  font-size:12px; color:#fff; padding:5px 6px; border-radius:4px; background:#b8b8b8;}
.content .cont .view ul li .letter_delete {display: inline-block;  font-size:12px; color:#777; padding:5px 8px; border-radius:4px; background:#fff; border:1px solid #ddd; float:right; }
.content .cont .view ul li .letter_delete img {width:9px; margin:-2px 0 0 5px;}
.content .cont .view ul li .bg {width:100%; aspect-ratio: 722 / 1024; background:url('../img/bg.jpg')no-repeat center #fff; margin-top:10px; background-size:cover; box-shadow: 0 0 8px rgba(0,0,0,.08); display: flex; justify-content: center;align-items: center ; font-size: calc(722px * 15 / 722);}
.content .cont .view ul li .bg textarea {width:80%; height:77%; border:none; background:none; font-weight:300; color:#222; resize: none; overflow: hidden;  font-size: 1em; padding:0;}
.content .cont .view ul li .bg textarea::-webkit-scrollbar {display: none;}

.content .cont .view ul li .bg.large {font-size: calc(722px * 17 / 722);}
.content .cont .view ul li .bg.large textarea {line-height:2.52em;}

.content .cont .view ul li .bg.medium {font-size: calc(722px * 15 / 722);}
.content .cont .view ul li .bg.medium textarea {line-height:2.86em;;}

.content .cont .view ul li .bg.small {font-size: calc(722px * 13 / 722);}
.content .cont .view ul li .bg.small textarea {line-height:3.3em; -webkit-user-modify: read-write-plaintext-only; }

.content .cont .view ul li .typing_num {position: absolute; right:75px ;bottom:50px; font-weight:400; font-size:12px; color:#777;}

.content .cont.on .font_preview {left:0;}
.content .cont.on .view {width:calc(100% - 351px); min-width:770px;}

.content .cont .mo_letter_info {border:1px solid #e8e8e8; padding:8px; max-width:722px; width:calc(100% - 40px); margin:20px auto 0 auto;}
.content .cont .mo_letter_info:after {content:''; clear:both; display: table;}
.content .cont .mo_letter_info .img {float:left; width:90px; height:90px; }
.content .cont .mo_letter_info .txt {float:right; width:calc(100% - 105px); padding:8px 5px 8px 0;}
.content .cont .mo_letter_info .txt p {font-size:13px; color:#111; font-weight:500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.content .cont .mo_letter_info .txt span {display: inline-block; width:100%; margin-top:6px;font-size:11px; color:#777; font-weight:300; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.content .cont .mo_letter_info .txt b {display: inline-block; width:100%; margin-top:12px; color:#111; font-size:14px; font-weight:600;}
.content .cont .mo_letter_info .txt b strong {color:#FF6262; font-weight:600; display: inline-block; margin-right:3px;}

.content .cont .info_mess {text-align: center; font-size:14px; line-height:1.4em; margin-top:20px; color:#888;}
.content .cont .info_mess b {font-weight:500; color:#111;}
.content .cont .info_mess span {color:#FF6262; font-weight:500;}


.content .step2 {height:100%; overflow-y: scroll;}
.content .step2::-webkit-scrollbar {display: none;}
.content .step2 .img_banner {margin:35px 40px; height:210px; background:url('../img/img_banner.jpg')no-repeat bottom left #F3EDEA; position: relative; overflow: hidden; padding:40px 70px;}
.content .step2 .img_banner .img {position: absolute; right:-3px; top:-25px;}
.content .step2 .img_banner h3 {font-size:20px; color:#111; font-weight:600;}
.content .step2 .img_banner p {margin-top:10px ;font-size:15px; color:#777; line-height:1.4em; font-weight:300;}
.content .step2 .img_banner button {height:41px; width:145px; font-size:15px ;color:#fff; background:#111; border:none; margin-top:20px;}

.content .step2 .img_info {border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; padding:15px 40px;}
.content .step2 .img_info p {display: inline-block; font-size:13px; color:#aaa;}
.content .step2 .img_info p b {color:#111; font-weight:600;}
.content .step2 .img_info .all_sel {float:right; margin-top:-7px;}
.content .step2 .img_info .all_sel input[type="checkbox"] {display: none;}
.content .step2 .img_info .all_sel input[type="checkbox"] + label {position: relative; cursor: pointer; font-size:12px; color:#777; font-weight:500;}
.content .step2 .img_info .all_sel input[type="checkbox"] + label span {position: absolute; left:-23px; width:15px; height:15px; background:#fff; border:1px solid #e4e4e4; top:0px;}
.content .step2 .img_info .all_sel input[type="checkbox"]:checked + label {color:#111;}
.content .step2 .img_info .all_sel input[type="checkbox"]:checked + label span {background:url('../img/check.svg')no-repeat center #222; border:1px solid #222; }
.content .step2 .img_info .all_sel button {height:30px;width:60px; font-size:12px; color:#888; border:1px solid #e4e4e4; background:#fff; margin-left:10px;}

.content .step2 .img_list {padding:30px 40px;}
.content .step2 .img_list:after {content:''; clear:both; display: table;}
.content .step2 .img_list li {float:left; width:calc((100% - 80px) / 5); margin:0 20px 20px 0; padding:10px; box-shadow: 0 0 8px rgba(0,0,0,.1); position: relative;}
.content .step2 .img_list li input[type="checkbox"] {display: none;}
.content .step2 .img_list li input[type="checkbox"] + label {position: absolute; left:18px; top:18px; width:17px; height:17px; background:#fff; border:1px solid #e4e4e4; }
.content .step2 .img_list li input[type="checkbox"]:checked + label {background:url('../img/check.svg')no-repeat center #222; border:1px solid #222; }
.content .step2 .img_list li:nth-child(5n) {margin-right:0;}
.content .step2 .img_list li .img {width:100%; padding-top:150%;}
.content .step2 .img_list li .bt {margin-top:8px;}
.content .step2 .img_list li .bt:after {content:''; clear:both; display: table;}
.content .step2 .img_list li .bt button {float:left; width:calc((100% - 7px) / 2); height:30px; font-size:13px; color:#999; background:none; border:1px solid #e4e4e4}
.content .step2 .img_list li .bt button:last-child {float:right;}






.content .step3 {height:100%; overflow-y: scroll; padding:45px 60px;}
.content .step3::-webkit-scrollbar {display: none;}
.content .step3 h2 {font-size:22px; color:#111; font-weight:600; line-height:1.3em;width:100%; max-width:1200px; margin:0 auto;}
.content .step3 .post_box {max-width:1200px; width:100%; height:770px; background:url('../img/step3_bg.png')no-repeat center right; border-radius:10px;  padding:40px 143px 45px 40px; position: relative; margin:30px auto 0 auto;}
.content .step3 .post_box .box1 {float:left; width:365px; position: relative; padding:20px 20px 10px 20px; border-radius:10px; border:2px solid #11111140; background:#0000000a;}

.content .step3 .post_box h3 {font-size:18px; color:#222; font-weight:700; margin-bottom:10px;}
.content .step3 .post_box input[type="text"] {width:100%; height:40px; background:rgba(255,255,255,.55); padding:0 15px; font-size:15px; border:none; color:#222; margin-top:8px;}
.content .step3 .post_box input[type="text"]::placeholder {color:#C6B49C;}
.content .step3 .post_box input[type="text"].input1 {width:115px;}
.content .step3 .post_box input[type="text"].input2 {float:left;width:calc((100% - 25px) / 2);}
.content .step3 .post_box .box1 input[type="text"].input2 {width:160px;}
.content .step3 .post_box input[type="text"].input3 {width:calc((100% - 25px) / 2 + 20px); float:right;}
.content .step3 .post_box input[type="checkbox"] {display: none;}
.content .step3 .post_box input[type="checkbox"] + label {position: relative; cursor: pointer; font-size:13px; color:#222; font-weight:400; position: absolute; right:20px; bottom:10px;}
.content .step3 .post_box input[type="checkbox"] + label span {position: absolute; left:-23px; width:16px; height:16px; background:rgba(255,255,255,.55);   top:0px;}
.content .step3 .post_box input[type="checkbox"]:checked + label {color:#111;}
.content .step3 .post_box input[type="checkbox"]:checked + label span {background:url('../img/check.svg')no-repeat center #222; }

.content .step3 .post_box .box2 {float:right; width:385px; margin-top:300px; position: relative; padding:20px 20px 20px 20px; border-radius:10px; border:2px solid #ef3b3b4f; background:#9f000005;}
.content .step3 .post_box input[type="checkbox"] + label {bottom:initial; top:53px}
.content .step3 .post_box .btn:after {content:''; clear:both; display: table;}
.content .step3 .post_box .btn {margin-top:8px;}
.content .step3 .post_box .btn button {float:left; width:calc((100% - 10px) / 3); margin-right:5px; height:31px; background:#111; color:#fff; border:none; font-size:13px; }
.content .step3 .post_box .btn button:last-child {margin-right:0;}

.content .step3 .post_box .post_sel {position: absolute; top:45px; right:125px; border-radius:9px; background:rgba(255,255,255,.55);  height:95px; z-index: 1; cursor: pointer;}
.content .step3 .post_box .post_sel:after {content:''; position: absolute; left:-5px; top:-5px; width:calc(100% + 10px); height:calc(100% + 10px); border:1px solid rgba(255,255,255,.55); border-radius:12px;}

.content .step3 .post_box .post_sel .no {padding:27px 28px; background:url('../img/post_arrow.svg')no-repeat center right 22px; width:240px;}
.content .step3 .post_box .post_sel .no p {font-size:16px; color:#886f4e; font-weight:600;}
.content .step3 .post_box .post_sel .no span {display: inline-block; width:100%; margin-top:4px; font-size:13px; color:#C6B49C}

.content .step3 .post_box .post_sel .on {padding:12px; width:295px;}
.content .step3 .post_box .post_sel .on:after {content:''; clear:both; display: table;}
.content .step3 .post_box .post_sel .on img {float:left; width:70px;}
.content .step3 .post_box .post_sel .on .txt {float:right; width:calc(100% - 70px); padding:5px 0 0px 13px}
.content .step3 .post_box .post_sel .on .txt h3 {font-size:15px; color:#111; font-weight:600; margin-bottom:0;}
.content .step3 .post_box .post_sel .on .txt b {font-size:15px; color:#111; font-weight:500; display: inline-block; width:100%; margin-top:2px;}
.content .step3 .post_box .post_sel .on .txt b span {font-size:13px; color:#bbb; text-decoration: line-through; margin-right:5px; font-weight:300;}
.content .step3 .post_box .post_sel .on .txt p {margin-top:14px; font-size:12px; line-height:1.3em; color:#555; font-weight:300;}
.content .step3 .post_box .post_sel .on .txt p strong {color:#111; font-weight:600;}



.content .step4 {height:100%;}
.content .step4:after {content:''; clear:both; display: table;}
.content .step4 .box1 {float:left; width:630px; padding:30px 40px; border-right:1px solid #e8e8e8; height:100%; position: relative; overflow-y: scroll;}
.content .step4 .box1::-webkit-scrollbar {display: none;}
.content .step4 .box1 h2 {font-size:20px; color:#111; font-weight:300;}
.content .step4 .box1 h2 b {font-weight:700; }
.content .step4 .box1 .letter_editor {position: absolute; right:40px; top:25px; height:35px; width:105px; background:#111; color:#fff; font-weight:500;font-size:14px; border:none; padding-bottom:1px;}
.content .step4 .box1 ul {width:100%; margin:15px auto 0 auto; position: relative;}
.content .step4 .box1 ul li {margin-bottom:40px; width:100%; position: relative; aspect-ratio: 722 / 1024;}
.content .step4 .box1 ul li:last-child {margin-bottom:0;}
.content .step4 .box1 ul li span {display: inline-block;  font-size:12px; color:#fff; padding:5px 6px; border-radius:4px; background:#b8b8b8;}
.content .step4 .box1 ul li .bg {width:100%; height:1024px; background:url('../img/bg.jpg')no-repeat center #fff; margin-top:10px; background-size:cover; box-shadow: 0 0 8px rgba(0,0,0,.08);  font-size:calc(722px * 15 / 722); aspect-ratio: 722 / 1024; display: flex ; justify-content: center; align-items: center;}
.content .step4 .box1 ul li .bg textarea {width: 80%;
	height: 77%; border: none; background: none; font-weight: 300; color: #222; resize: none; overflow: hidden; font-size: 1em; padding: 0;}
.content .step4 .box1 ul li .bg textarea::-webkit-scrollbar {display: none;}
.content .step4 .box1 ul li .bg.small {font-size: calc(722px * 13 / 722);}
.content .step4 .box1 ul li .bg.small textarea {line-height: 3.3em; -webkit-user-modify: read-write-plaintext-only;}
.content .step4 .box1 ul li .bg.medium {font-size:calc(722px * 15 / 722)}
.content .step4 .box1 ul li .bg.medium textarea {line-height: 2.86em;}
.content .step4 .box1 ul li .bg.large {font-size: calc(722px * 17 / 722);}
.content .step4 .box1 ul li .bg.large textarea {line-height: 2.52em;}

.content .step4 .box1 ul li .letter_box {width:722px; position: absolute; left:-90px; top:-132px; transform:scale(0.75);}

.content .step4 .box2 {float:left; width:calc(100% - 630px); height:100%; overflow-y: scroll;}
.content .step4 .box2::-webkit-scrollbar {display: none;}
.content .step4 .box2 .img_view {padding:30px 40px; position: relative; overflow: hidden;}
.content .step4 .box2 h2 {font-size:20px; color:#111; font-weight:300;}
.content .step4 .box2 h2 b {font-weight:700; }
.content .step4 .box2 .img_editor {position: absolute; right:40px; top:25px; height:35px; width:105px; background:#111; color:#fff; font-weight:500;font-size:14px; border:none; padding-bottom:1px;}
.content .step4 .box2 .img_view:after {content:''; clear:both; display: table;}
.content .step4 .box2 .img_view .swiper {overflow: visible; margin-top:20px;}
.content .step4 .box2 .img_view .swiper .swiper-slide {width:200px !important; padding:10px; box-shadow: 0 0 8px rgba(0,0,0,.1); }
.content .step4 .box2 .img_view .swiper .swiper-slide .img {width:100%; padding-top:150%;}
.content .step4 .box2 .img_view .swiper .swiper-slide .bt {margin-top:8px;}
.content .step4 .box2 .img_view .swiper .swiper-slide .bt:after {content:''; clear:both; display: table;}
.content .step4 .box2 .img_view .swiper .swiper-slide .bt button {float:left; width:calc((100% - 7px) / 2); height:30px; font-size:13px; color:#999; background:none; border:1px solid #e4e4e4}
.content .step4 .box2 .img_view .swiper .swiper-slide .bt button:last-child {float:right;}


.content .step4 .box2 .add_info {padding:30px 40px; position: relative; border-top:1px solid #e8e8e8}
/* 첨부 자료 섹션(h2 직후의 직계 ul) — 입력된 주소(.add_box)와 동일한 타이틀-아이템 세로 갭 +
   등기자료 카드를 가로 플로우(랩)로 나열. 첨부 PDF 라인은 텍스트 한 줄이라 전폭 유지. */
.content .step4 .box2 .add_info > ul {margin-top:20px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px;}
.content .step4 .box2 .add_info > ul .fv2-editor__attach-pdf {flex-basis:100%;}
/* 카드 폭 = 썸네일 프레임 폭(128px) — 이름 최대 폭(ellipsis 기준)도 카드 폭과 일치한다. */
.content .step4 .box2 .add_info > ul .fv2-editor__attach-material {width:128px;}
/* 썸네일 프레임을 카드 폭에 맞춰 확대(기본 64×80 → 128×160, 4:5 유지). 미리보기는 비율 유지(contain)로
   프레임 중앙 배치 — 이미지 비율이 프레임과 다를 때만 옅은 그레이 배경이 레터박스로 드러난다. */
.content .step4 .box2 .add_info > ul .fv2-editor__attach-material .fv2-editor__catalog-thumb {width:128px; height:160px; margin:0 auto; background:#f0f2f6;}
/* width/height 100% 는 feature-v2-web-editor.css 베이스 규칙에도 있으나, 이 페이지 스타일이
   해당 시트 로드에 의존하지 않도록 자립 명시(gemini 리뷰 반영). attribute(64×80) 크기 고착 방지. */
.content .step4 .box2 .add_info > ul .fv2-editor__attach-material .fv2-editor__catalog-thumb img {width:100%; height:100%; object-fit:contain;}
/* 자료명은 썸네일 폭을 넘으면 ellipsis (전체 명칭은 title 툴팁). */
.content .step4 .box2 .add_info > ul .fv2-editor__attach-name {margin-top:8px; max-width:100%; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
/* 모바일(feature-v2-web-editor.css 와 동일 분기점): 카드 104px — 썸네일 프레임도 104×130(4:5)로 축소. */
@media (max-width:768px) {
    .content .step4 .box2 .add_info > ul .fv2-editor__attach-material {width:104px;}
    .content .step4 .box2 .add_info > ul .fv2-editor__attach-material .fv2-editor__catalog-thumb {width:104px; height:130px;}
}
.content .step4 .box2 .add_info .add_box {margin-top:20px; display: flex; flex-direction: row;}
.content .step4 .box2 .add_info .add_box:after {content:''; clear:both; display: table;}
.content .step4 .box2 .add_info .add_box .left {float:left; width:calc((100% - 20px) / 2); padding:22px 25px; background:#f8f8f8; margin-right:20px;}
.content .step4 .box2 .add_info .add_box .right {float:right; width:calc((100% - 20px) / 2); padding:22px 25px; background:#f8f8f8;}
.content .step4 .box2 .add_info .add_box h3 {font-size:16px; color:#111; font-weight:600;}
.content .step4 .box2 .add_info .add_box ul li {position: relative; font-size:14px; color:#555; padding-left:80px; margin-top:20px;}
.content .step4 .box2 .add_info .add_box ul li span {color:#111; font-weight:500; position: absolute; left:0; top:0;}
.content .step4 .box2 .add_info .add_box button {width:100%; height:35px; font-size:14px; margin-top:25px; border:none; background:#111; color:#fff; padding-bottom:1px;}

.content .step4 .box2 .add_info .post_info { width:calc((100% - 20px) / 2); position: relative;margin-top:15px;}
.content .step4 .box2 .add_info .post_info .post_sel {position: absolute; right:0px; top:9px; border:none; background:none; font-size:12.5px; color:#FF6262; font-weight:500;}
.content .step4 .box2 .add_info .post_info .post_sel img {width:auto; margin:-2px 0 0 5px; float:initial;}
.content .step4 .box2 .add_info .post_info:after {content:''; clear:both; display: table;}
.content .step4 .box2 .add_info .post_info img {float:left; width:95px;}
.content .step4 .box2 .add_info .post_info .txt {float:right; width:calc(100% - 95px); padding:8px 0 0px 16px}
.content .step4 .box2 .add_info .post_info .txt h3 {font-size:15px; color:#111; font-weight:600; margin-bottom:0;}
.content .step4 .box2 .add_info .post_info .txt b {font-size:15px; color:#111; font-weight:500; display: inline-block; width:100%; margin-top:1px;}
.content .step4 .box2 .add_info .post_info .txt b span {font-size:13px; color:#bbb; text-decoration: line-through; margin-right:5px; font-weight:300;}
.content .step4 .box2 .add_info .post_info .txt p {margin-top:12px; font-size:12px; line-height:1.3em; color:#555; font-weight:300;}
.content .step4 .box2 .add_info .post_info .txt p strong {color:#111; font-weight:600;}

.content .step4 .box1 .pro_info {display: none;}


.content .step5 {height:100%;}
.content .step5 .info_box {float:left; width:calc(100% - 370px); height:100%; overflow-y:scroll; padding:30px 40px;}
.content .step5 .info_box::-webkit-scrollbar {display: none;}
.content .step5 .info_box h2 {font-size:20px; color:#111; font-weight:600;}
.content .step5 .info_box ul {border-top:1px solid #111; margin-top:25px;}
.content .step5 .info_box ul li {border-bottom:1px solid #e4e4e4; display: flex;}
.content .step5 .info_box ul li:after {content:''; clear:both; display: table;}
.content .step5 .info_box ul li .info_1 {float:left; width:calc(100% - 265px); padding:20px 0; display: flex;align-items: flex-start; flex-direction: column;}
.content .step5 .info_box ul li:nth-child(1) {font-size:14px; color:#999; font-weight:300;}
.content .step5 .info_box ul li:nth-child(2) .pro_box {width:100%;}
.content .step5 .info_box ul li:nth-child(2) .pro_box:after {content:''; clear:both; display: table;}
.content .step5 .info_box ul li:nth-child(2) .pro_box .img {float:left; width:100px; height:100px; }
.content .step5 .info_box ul li:nth-child(2) .pro_box .txt {float:left; width:calc(100% - 100px); padding:7px 0 0 17px;}
.content .step5 .info_box ul li:nth-child(2) .pro_box .txt p {font-size:15px; color:#111; font-weight:600;}
.content .step5 .info_box ul li:nth-child(2) .pro_box .txt span {display: inline-block; width:100%; margin-top:8px; font-size:13px; color:#777; line-height:1.3em;}
.content .step5 .info_box ul li:nth-child(2) .pro_box .txt b {display: inline-block; width:100%; margin-top:10px; font-weight:600; font-size:15px;}
.content .step5 .info_box ul li:nth-child(2) .pro_box .txt strong {font-weight:600; color:#FF6262; display: inline-block; margin-right:4px;}
.content .step5 .info_box ul li.defaultPricing p {font-size:15px ;color:#111; font-weight:600; width:100%;}
.content .step5 .info_box ul li.defaultPricing p span {display: inline-block; font-size:13px ;color:#777; font-weight:400; margin-left:5px;}
.content .step5 .info_box ul li.defaultPricing .img_cont:after {content:''; clear:both; display: table;}
.content .step5 .info_box ul li.defaultPricing .img_cont {width:100%;}
.content .step5 .info_box ul li.defaultPricing .img_box {float:left; width:calc((100% - 60px) / 7); margin-right:10px;margin-top:10px; padding-top:calc(((100% - 60px) / 7) * 1.4);}
.content .step5 .info_box ul li.postPricing .post_box {width:100%;}
.content .step5 .info_box ul li.postPricing .post_box:after {content:''; clear:both; display: table;}
.content .step5 .info_box ul li.postPricing .post_box img {float:left; width:100px; height:100px; }
.content .step5 .info_box ul li.postPricing .post_box .txt {float:left; width:calc(100% - 100px); padding:20px 0 0 17px;}
.content .step5 .info_box ul li.postPricing .post_box .txt h3 {font-size:15px; color:#111; font-weight:600;}
.content .step5 .info_box ul li.postPricing .post_box .txt p {display: inline-block; width:100%; margin-top:8px; font-size:13px; color:#777; line-height:1.3em;}
.content .step5 .info_box ul li.postPricing .post_box .txt p strong {color:#111;}

.content .step5 .info_box ul li .info_2 {float:left; width:265px; text-align: center; padding:20px 0; font-size:15px; color:#111; font-weight:700; border-left:1px solid #e4e4e4; display: flex;align-items: center; justify-content: center; flex-direction: column;}
.content .step5 .info_box ul li .info_2 span {display: none;}
.content .step5 .info_box ul li .info_2 b {display: inline-block; width:100%; font-weight:400; font-size:12px; margin-top:2px; color:#999;}
.content .step5 .info_box ul li .info_2 strong {display: inline-block; width:100%; font-weight:400; font-size:12px; margin-bottom:2px; color:#bbb; text-decoration: line-through;}

.content .step5 .info_box ul li:nth-child(1) .info_1, .content .step5 .info_box ul li:nth-child(1) .info_2 {padding:17px 0; text-align: left; }
.content .step5 .info_box ul li:nth-child(1) .info_2 {font-size:14px; color:#999; font-weight:400; }


.content .step5 .payment {float:right; width:370px; height:100%; border-left:#e4e4e4; background:#f8f8f8; overflow-y: scroll; padding:25px; position: relative;}
.content .step5 .payment .pay_scroll {position: relative; height:calc(100% - 89px); padding-bottom:30px; overflow-y: scroll;}
.content .step5 .payment .pay_scroll::-webkit-scrollbar {display: none;}
.content .step5 .payment h2 {font-size:18px; color:#111; font-weight:600; border-bottom:1px solid #e8e8e8; padding-bottom:20px;}
.content .step5 .payment .point_ck {margin-top:25px;}
.content .step5 .payment .point_ck input[type="checkbox"] {display: none;}
.content .step5 .payment .point_ck input[type="checkbox"] + label {display: inline-block; width:100%; position: relative; font-size:15px; color:#666; font-weight:500; padding-left:25px; cursor: pointer;}
.content .step5 .payment .point_ck input[type="checkbox"] + label span {position: absolute; left:0; top:0; width:17px; height:17px; border:1px solid #e4e4e4; background:#fff;}
.content .step5 .payment .point_ck input[type="checkbox"]:checked + label {color:#111; font-weight:600;}
.content .step5 .payment .point_ck input[type="checkbox"]:checked + label span {background:url('../img/check.svg')no-repeat center #111; border:1px solid #111;}
.content .step5 .payment .input_box {margin-top:10px; position: relative;}
.content .step5 .payment .input_box input[type="text"] {width:100%; background:#fff; border:1px solid #e4e4e4; padding:0 15px; font-size:14px ;color:#111; font-weight:500; height:40px;}
.content .step5 .payment .input_box strong {position: absolute; right:15px; top:11px; font-size:14px; font-weight:400; color:#999;}
.content .step5 .payment .input_box p {font-size:13px ; margin-top:5px; color:#a8a8a8; }
.content .step5 .payment .input_box p b {color:#FF6262;}
.content .step5 .payment .input_box span {display: inline-block; width:100%; margin-top:10px; font-size:12px; color:#999;  font-weight:300; padding-left:12px;}
.content .step5 .payment .input_box span b {display: inline-block; width:100%; color:#555; margin-bottom:3px; font-size:13px; font-weight:600; position: relative; left:-12px;}

.content .step5 .payment h3 {font-size:16px; color:#111; font-weight:600; margin-top:25px; padding-top:25px ;border-top:1px dashed #dadada}
.content .step5 .payment .pay_bt_box {margin-top:15px;}
.content .step5 .payment .pay_bt_box:after {content:''; clear:both; display: table;}
.content .step5 .payment .pay_bt_box button {float:left; width:calc((100% - 20px) / 3); margin-right:10px; height:95px; background:none; border:1px solid #e4e4e4 ;font-size:14px; color:#999; font-weight:400; }
.content .step5 .payment .pay_bt_box button:last-child {margin-right:0;}
.content .step5 .payment .pay_bt_box button img {height:27px; margin-bottom:8px; margin-top:2px; opacity: .4}
.content .step5 .payment .pay_bt_box button:last-child img {height:37px; margin-bottom:4px; margin-top:-4px;}
.content .step5 .payment .pay_bt_box button.on {color:#111; border:1px solid #111; font-weight:600;}
.content .step5 .payment .pay_bt_box button.on img {opacity: 1;}

.content .step5 .payment .point_ck2 {margin-top:13px;}
.content .step5 .payment .point_ck2 input[type="checkbox"] {display: none;}
.content .step5 .payment .point_ck2 input[type="checkbox"] + label {display: inline-block; width:100%; position: relative; font-size:14px; color:#666; font-weight:400; padding-left:25px; cursor: pointer;}
.content .step5 .payment .point_ck2 input[type="checkbox"] + label span {position: absolute; left:0; top:0; width:17px; height:17px; border:1px solid #e4e4e4; background:#fff;}
.content .step5 .payment .point_ck2 input[type="checkbox"]:checked + label {color:#111; font-weight:500;}
.content .step5 .payment .point_ck2 input[type="checkbox"]:checked + label span {background:url('../img/check.svg')no-repeat center #111; border:1px solid #111;}

.content .step5 .payment .pay_info {background:#fff; padding:25px;}
.content .step5 .payment .pay_info li:after {content:''; clear:both; display: table;}
.content .step5 .payment .pay_info li {font-size:14px; color:#8d8d8d; margin-bottom:12px;}
.content .step5 .payment .pay_info li b {float:right; color:#111; font-weight:500;}
.content .step5 .payment .pay_info li:last-child {border-top:1px solid #E8E8E8; margin-bottom:0;padding-top:15px;}
.content .step5 .payment .pay_info li:last-child b {font-size:16px; color:#111; font-weight:600;}

.content .step5 .payment .pay_ck {margin-top:15px;}
.content .step5 .payment .pay_ck input[type="checkbox"] {display: none;}
.content .step5 .payment .pay_ck input[type="checkbox"] + label {display: inline-block; width:100%; position: relative; font-size:14px; color:#666; font-weight:400; padding-left:25px; cursor: pointer;}
.content .step5 .payment .pay_ck input[type="checkbox"] + label span {position: absolute; left:0; top:0; width:17px; height:17px; border:1px solid #e4e4e4; background:#fff;}
.content .step5 .payment .pay_ck input[type="checkbox"]:checked + label {color:#111; font-weight:500;}
.content .step5 .payment .pay_ck input[type="checkbox"]:checked + label span {background:url('../img/check.svg')no-repeat center #111; border:1px solid #111;}
.content .step5 .payment .pay_ck p {font-size:13px ;color:#999; margin-top:6px; padding-left:25px; line-height:1.3em;}
.content .step5 .payment .pay_ck p a {display: inline-block; color:#FF6262;}

.content .step5 .payment .bt_posi {position: absolute; left:0; bottom:20px; width:100%;}

.content .step5 .payment .pay_bt {position: absolute; left:25px; bottom:22px; height:47px; background:#111; color:#fff; border:none;  font-size:16px ; width:calc(100% - 50px)}

.content .step1 {
	height: var(--fontopen-height) !important;
}

.no_data {padding:100px 0; text-align: center; }
.no_data p {margin-top:20px; font-size:13px; color:#aaa; font-weight:300; line-height:1.45em;}


.letter_preview {width:1748px; height:2480px; box-shadow:2px 2px 10px rgba(0,0,0,.1);}
.letter_preview .bg {width:1748px; height:2480px; aspect-ratio: 1748 / 2480; display: flex; justify-content: center; align-items: center; font-size: calc(1748px * 15 / 722);}
.letter_preview .bg textarea {width: 80%; height: 79%; margin-top: 3%; border: none; background: none; font-weight: 300; color: #222; resize: none; overflow: hidden; font-size: 1em; padding: 0; line-height:2.86em;}
.letter_preview .bg .textDiv {width: 80%; height: 77%; border: none; background: none; font-weight: 300; color: #222; resize: none; overflow: hidden; font-size: 1em; padding: 0; line-height:2.86em;}
.letter_preview .bg textarea::-webkit-scrollbar {display: none;}
.letter_preview .bg .textDiv::-webkit-scrollbar {display: none;}

.letter_preview .bg.large {font-size: calc(1748px * 17 / 722);}
.letter_preview .bg.large textarea {line-height:2.52em;}
.letter_preview .bg.medium {font-size: calc(1748px * 15 / 722);}
.letter_preview .bg.medium textarea {line-height:2.86em;;}
.letter_preview .bg.small {font-size: calc(1748px * 13 / 722);}
.letter_preview .bg.small textarea {line-height:3.3em;}

.letter_preview2 {width:1748px; height:2480px;  aspect-ratio: 1748 / 2480; margin:0 auto;}

.letter_preview3 {width:2126px; height:1417px;  aspect-ratio: 1063 / 709; margin:0 auto; /*background:url('../img/letter_preview3.jpg')no-repeat center;*/ background:#fff; position: relative; box-shadow:2px 2px 10px rgba(0,0,0,.1); }
.letter_preview3 .info {position: absolute; right:28px; bottom:23px; font-size:12px; color:#111; font-weight:500; }
.letter_preview3 .img {position: absolute; right:90px; top:110px;}
.letter_preview3 .box1 {position: absolute; left:165px; top:200px; width:825px;}
.letter_preview3 .box2 {position: absolute; right:165px; bottom:200px; width:825px;}
.letter_preview3 h3 {font-size:38px; color:#111; font-weight:600;}
.letter_preview3 h3:after {content:''; clear:both; display: table}
.letter_preview3 h3 span {display: inline-block; border-radius:10px; border:1px solid #C0C0C0; color:#787878; font-size:24px; padding:6px 14px; font-weight:400; margin:0 0 -4px 8px;}
.letter_preview3 ul {border-top:4px solid #111; margin-top:22px; background:url('../img/line_bg.png')no-repeat center top; background-size:100%; padding-bottom:1px;}
.letter_preview3 ul li {position: relative; font-size:28px; color:#111; font-weight:500; line-height:86px; padding-left:155px;}
.letter_preview3 ul li b {position: absolute; left:0; top:18px; font-size:27px; font-weight:500; line-height:1.0em;}
.letter_preview3 ul li b span {font-weight:500; color:#444; font-size:23px;}
.letter_preview3 .num {margin-top:30px;}
.letter_preview3 .num span {display: inline-block; margin-right:10px; height:71px; width:71px; border:1px dashed #111; text-align:center; line-height:68px; font-size:34px; }
.letter_preview3 .col_sp {position: absolute; right:0; bottom:0px; height:71px; line-height:68px; font-size:27px ;color:#111; border:1px solid #111; border-radius:9px; padding:0 20px;}
.letter_preview3 .col_sp img {position: absolute; left:-52px; width:35px; top:12px;}
.letter_preview3 .box2 .num span {border-color:#111; color:#111}

/* 대봉투 캡처 레이아웃 (#474 T003) — 물리 365×245mm 가로형. 소봉투(.letter_preview3)는 변경 금지(AC-002 회귀),
   대봉투만 .letter_preview3-large 로 종횡비와 보내는/받는사람 마진을 덮어쓴다. 캔버스 폭은 소봉투와 동일한
   2126px 로 두어 px/mm ≈ 2126/365 ≈ 5.825 (소봉투는 2126/180 ≈ 11.81). 사용자 확정 마진(reading orientation,
   봉투 물리 가장자리 기준): 보내는사람 top 3cm·left 5.5cm / 받는사람 bottom 3cm·right 2cm.
   (바코드는 캡처가 아니라 admin 이 합성하므로 web 캡처엔 바코드 영역을 그리지 않는다 — 기존 소봉투 캡처도 동일.) */
.letter_preview3-large {aspect-ratio: 365 / 245; height:auto;}
.letter_preview3-large .box1 {left:320px; top:175px;}   /* 보내는사람: left 5.5cm(≈320px)·top 3cm(≈175px) */
.letter_preview3-large .box2 {right:116px; bottom:175px;} /* 받는사람: right 2cm(≈116px)·bottom 3cm(≈175px) */

@media screen and (max-height:890px) {
	.content .step5 .payment .bt_posi {position: relative; margin-top:15px; bottom:0;}
}
@media screen and (max-width:1025px) {
	.content .step5 .payment .bt_posi {position: relative; margin-top:15px; bottom:0;}
}

@media screen and (max-width:1600px) {
	.content .step4 .box2 .add_info .add_box .left {width:100%; margin:0 0 15px 0;}
	.content .step4 .box2 .add_info .add_box .right {width:100%;}
	.content .step4 .box2 .add_info .post_info {width:100%;}

	.content .step5 .info_box ul li.defaultPricing .img_box {width:calc((100% - 50px) / 5); padding-top:calc(((100% - 60px) / 5) * 1.4)}
	.content .step5 .info_box ul li .info_2 {width:180px;}
	.content .step5 .info_box ul li .info_1 {width:calc(100% - 180px);}

	.content .step4 .box2 .add_info .add_box {display: inline-block;}

}

@media screen and (max-width:1440px) {
	.content .step3 .post_box .box1, .content .step3 .post_box .box2 {width:320px;}

	.content .step4 .box1 {width:500px;}
	.content .step4 .box2 {width:calc(100% - 500px);}
	.content .step4 .box1 ul li .letter_box {left:-151px; top:-227px; transform: scale(0.58)}


}


@media screen and (max-width:1279px) {
	#fontOpen.mobile_height {height:100svh;}
	.content .cont .font_preview {display: none;}
	.content .cont.on .font_preview {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index: 11; max-width:100%; display: block;}
	.content .cont.on .font_preview .col {position: absolute; max-width:400px; width:90%; height:90vh; background:#fff; z-index: 11; left:50%; top:50%; transform: translate(-50%,-50%);}
	.content .cont.on .font_preview .f_prev_close {position: absolute;bottom:0; width:100%; height:40px; background:#111; color:#fff; font-size:14px; font-weight:500; left:0; display: block; border:none;}
	.content .cont.on .font_preview ul {padding-bottom:50px;}

	.content .cont.on .view {width:100%;}

	.content .step3 {height:calc(100% - 60px);}

	html {overflow: hidden;}
	.content .cont .view {padding-bottom:80px;}
}

@media screen and (max-width:1024px) {
	.content .cont {height:calc(100svh - 115px);}
	.content .cont .view {padding:20px 0 120px 0;}

	.content .editor {height:80px;}
	.content .editor .family_box {width:calc(100% - 132px); max-width:initial; border-bottom:1px solid #e8e8e8}
	.content .editor .family_box span {width:39px; height:39px; padding:9px 0; display: none;}
	.content .editor .family_box button {height:39px; width:100%;}
	.content .editor .family_box button img {top:17px;}

	.content .editor .size_box {border-bottom:1px solid #e8e8e8; width:132px;}

	.content .editor .select, .content .editor .select .label {height:39px;}
	.content .editor .select .optionList {top:39px;}

	.content .editor .fill_box {height:auto; width:160px;}
	.content .editor .fill_box input[type="text"] {height:39px;}
	.content .editor .fill_box span {line-height:39px;}

	.content .editor .zoom_box {height:40px; padding-left:9px; width:125px;}
	.content .editor .zoom_box button {height:25px; width:25px; margin-top:7px;}
	.content .editor .zoom_box span {line-height:38px;}

	.content .editor .spacing_box {width:92px;}
	.content .editor .spacing_box img {margin:11px 0 0 13px;}
	.content .editor .spacing_box input[type="text"] {height:39px; width:55px; padding-left:10px;}

	.content .editor .style_box {padding:7px 10px; width:231px;}
	.content .editor .style_box button {height:25px; width:25px;}
	.content .editor .style_box button img {height:15px;}

	.content .editor .page {display:none;}

	:root {
		--fontopen-height: calc(100svh - 150px) !important;
	}

	.content .step2 .img_banner {margin:0; padding:40px 40px; z-index: 1;}
	.content .step2 .img_banner .img {width:330px; top:75px; z-index: -1;}
	.content .step2 .img_info {padding:15px 20px;}
	.content .step2 .img_list {padding:20px;}
	.content .step2 .img_list li {width:calc((100% - 60px) / 4); }
	.content .step2 .img_list li:nth-child(5n) {margin-right:20px;}
	.content .step2 .img_list li:nth-child(4n) {margin-right:0;}


	.content .step3 {height:calc(100% - 55px);}
	.content .step3 .post_box {padding:40px 45px; background:url('../img/post_bg.jpg')repeat center; height:auto;}
	.content .step3 .post_box .post_sel {position: relative; width:295px; top:0; right:0;}
	.content .step3 .post_box .box1, .content .step3 .post_box .box2 {width:100%; float:initial; margin-top:40px;}

	.content .step4 .box2 .img_view .swiper .swiper-slide {width:160px !important}
	.content .step4 .box2 h2 {font-size:16px;}
	.content .step4 .box2 .img_view {padding:15px 20px;}
	.content .step4 .box2 .img_editor {height:30px; width:95px; font-size:12px;}
	.content .step4 .box2 .add_info {padding:15px 20px;}
	.content .step4 .box2 .add_info .add_box {margin-top:12px;}
	.content .step4 .box2 .add_info .add_box .left, .content .step4 .box2 .add_info .add_box .right {padding:15px 20px}
	.content .step4 .box2 .add_info .add_box ul li {font-size:13px; padding-left:68px;}

	.content .step4 .box2 .add_info .post_info img {width:70px;}
	.content .step4 .box2 .add_info .post_info .txt {width:calc(100% - 70px); padding:3px 0 0 10px}
	.content .step4 .box2 .add_info .post_info .txt h3 {font-size:14px;}
	.content .step4 .box2 .add_info .post_info .txt b {font-size:13px;}
	.content .step4 .box2 .add_info .post_info .txt b span {font-size:11px;}
	.content .step4 .box2 .add_info .post_info .txt p {font-size:11px; margin-top:5px;}
	.content .step4 .box2 .add_info .post_info .post_sel {top:3px; font-size:12px;}

	.content .step4 .box2 .img_editor {right:20px; top:9px;}

	.content .step5 {height:calc(100svh - 115px); overflow-y: scroll;}
	.content .step5::-webkit-scrollbar {display: none;}
	.content .step5 .info_box {width:100%; height:auto; overflow-y: initial; padding:25px 30px;}
	.content .step5 .payment {width:100%; height:auto; overflow-y: initial; padding:25px 25px 30px 25px;}
	.content .step5 .payment .pay_bt {position: relative; width:100%; left:0; bottom:0;}
}


@media screen and (max-width:767px) {
	.content .editor .size_box {width:125px;}
	.content .editor .family_box {width:calc(100% - 125px);}
	.content .editor .style_box {width:calc(100% - 92px - 143px); padding:7px 5px;}
	.content .editor .style_box button {float:left; width:calc((100% - 25px) / 6); margin-right:5px;}
	.content .editor .style_box button:last-child {margin-right:0;}
	.content .editor .style_box button:nth-child(3) img {height:13px; position: relative; top:-1px; left:-1px; opacity: .65}

	.content .editor .fill_box {padding-left:0; width:110px;}
	.content .editor .fill_box span {display: none;}
	.content .editor .fill_box input[type="text"] {font-size:13px;}
	.content .editor .fill_box .clr-field {width:100% !important;}

	.content .cont.on .font_preview .col {left:0; top:0; width:100%; height:100%; transform: initial;}

	.content .cont .view {padding:20px 20px 100px 20px;}
	.content .cont .view ul {display:flex; overflow-x:scroll; width:calc(100% + 40px); margin-left:-20px; padding:0 20px;}
	.content .cont .view ul li {flex:0 0 auto; margin-right:15px; width:89vw; margin-bottom:20px;}
	.content .cont .view ul li .bg {font-size: calc(89vw * 15 / 722);}
	.content .cont .view ul li .bg textarea {}
	/*.content .cont .view ul li .bg textarea {font-size:5.78px; line-height:16.7px}*/

	.content .cont .view ul li .typing_num {right:22px; bottom:19px; font-size:11px;}
	.content .cont {height:calc(100svh - 145px);}
	:root {
		--fontopen-height: calc(100svh - 180px) !important;
	}

	.content .cont .mo_letter_info {margin:20px 0 0 0; width:100%;}


	.content .step2 .img_list li {width:calc((100% - 15px) / 2); margin:0 15px 15px 0; padding:6px;}
	.content .step2 .img_list li:nth-child(5n) {margin-right:15px;}
	.content .step2 .img_list li:nth-child(4n) {margin-right:15px;}
	.content .step2 .img_list li:nth-child(3n) {margin-right:15px;}
	.content .step2 .img_list li:nth-child(2n) {margin-right:0;}
	.content .step2 .img_list li input[type="checkbox"] + label {top:14px; left:14px;}


	.content .step2 .img_banner {height:230px; padding:30px 25px;}
	.content .step2 .img_banner h3 {font-sizE:18px;}
	.content .step2 .img_banner p {font-size:13px;}
	.content .step2 .img_banner p br {display: none;}
	.content .step2 .img_banner button {height:36px; font-size:14px; width:120px; margin-top:15px;}
	.content .step2 .img_banner .img {width:270px; top:105px;}

	.content .step2 .img_info p span {display: none;}


	.content .step3 .post_box {margin-top:20px;}
	.content .step3 .post_box .post_sel {width:100%;}
	.content .step3 {padding:30px 20px 25px 20px}
	.content .step3 h2 {font-size:18px;}
	.content .step3 .post_box {padding:20px;}
	.content .step3 .post_box .box1 {margin-top:30px;}
	.content .step3 .post_box input[type="text"] {font-size:14px; height:38px;}
	.content .step3 .post_box input[type="text"].input2 {width:100%;}
	.content .step3 .post_box .box1 input[type="text"].input2 {width:100%;}
	.content .step3 .post_box input[type="text"].input3 {width:100%;}
	.content .step3 .post_box .box2 {margin-top:20px;}
	.content .step3 .post_box h3 {font-size:16px; margin-bottom:2px;}
	.content .step3 .post_box input[type="checkbox"] + label {top:41px;}
	.content .step3 .post_box .box2 input[type="checkbox"] + label {top:60px;}
	.content .step3 .post_box .post_sel .no {width:100%;}


	.content .step4 {overflow-y:scroll; height:calc(100% - 55px);}
	.content .step4::-webkit-scrollbar {display: none;}
	.content .step4 .box1 {width:100%; overflow-y: initial; height:auto; float:initial; padding:20px 20px;}
	.content .step4 .box1 h2 {font-size:18px;}
	.content .step4 .box1 .letter_editor {top:16px; right:20px; height:30px; font-size:13px; width:95px;}
	.content .step4 .box1 ul {position: relative; top:0; left:0; transform: initial; display:flex; width:calc(100% + 40px); padding:0 20px; min-height:510px; margin-left:-20px; margin-top:6px; overflow-y: hidden;}
	.content .step4 .box1 ul li {width:330px; flex:0 0 auto; margin-right:10px; margin-bottom:45px;}
	.content .step4 .box2 {width:100%;  overflow-y: initial; height:auto;}
	.content .step4 .box1 ul li .bg {transform:scale(0.789); position: absolute; left:-74px; top:-81px;}
	.content .step4 .box1 ul li .letter_box {top:4PX;}

	.content .cont .view ul li .bg.large {font-size: calc(89vw * 17 / 722);}
	.content .cont .view ul li .bg.medium {font-size: calc(89vw * 15 / 722);}
	.content .cont .view ul li .bg.small {font-size: calc(89vw * 13 / 722);}

	.content .step4 .box2 .img_editor {top:11px; right:20px;}
	.content .step4 .box2 .add_info {margin-top:5px; border-top:none; padding-bottom:110px;}
	.content .step4 .box2 h2 {font-size:18px;}

	.content .step4 .box1 .pro_info {width:100%; border:1px solid #eee; background:#fff; padding:10px; margin-top:15px; display: inline-block;}
	.content .step4 .box1 .pro_info:after {content:''; clear:both; display: table;}
	.content .step4 .box1 .pro_info .img {float:left; width:90px; height:90px; }
	.content .step4 .box1 .pro_info .txt {float:right; width:calc(100% - 105px); padding:8px 5px 8px 0;}
	.content .step4 .box1 .pro_info .txt p {font-size:13px; color:#111; font-weight:500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
	.content .step4 .box1 .pro_info .txt span {display: inline-block; width:100%; margin-top:6px;font-size:11px; color:#777; font-weight:300; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.content .step4 .box1 .pro_info .txt b {display: inline-block; width:100%; margin-top:12px; color:#111; font-size:14px; font-weight:600;}
	.content .step4 .box1 .pro_info .txt b strong {color:#FF6262; font-weight:600; display: inline-block; margin-right:3px;}
	.content .step4 .box2 .add_info .post_info .post_sel {width:100%; position: relative; right:0; top:0;height:32px; background:#f0f0f0; color:#999; margin-top:10px; float:left; font-size:13px; font-weight:400;}

	.content .step4 .box2 .add_info .post_info img {width:100px;}
	.content .step4 .box2 .add_info .post_info .txt {width:calc(100% - 100px); padding:6px 0 0 15px}
	.content .step4 .box2 .add_info .post_info .post_sel img {display: none;}
	.content .step4 .box2 .add_info .post_info .txt h3 {font-size:16px;}
	.content .step4 .box2 .add_info .post_info .txt b {font-size:14px; margin-top:3px;}
	.content .step4 .box2 .add_info .post_info .txt p {font-size:13px; margin-top:17px;}


	.content .step5 .info_box {padding:20px 25px;}
	.content .step5 .info_box h2 {font-size:18px; }
	.content .step5 .info_box ul {margin-top:20px;}
	.content .step5 .info_box ul li {display: inline-block; width:100%; padding-bottom:10px;}
	.content .step5 .info_box ul li:first-child {padding-bottom:0;}
	.content .step5 .info_box ul li .info_1 {width:100%; display: inline-block; padding:15px 0 10px 0;}
	.content .step5 .info_box ul li .info_2 {width:100%; display: inline-block;}
	.content .step5 .info_box ul li:nth-child(1) .info_1 {font-size:13px; padding:14px 0;}
	.content .step5 .info_box ul li:nth-child(1) .info_2 {display: none;}

	.content .step5 .info_box ul li .info_2 {border:none; background:#f8f8f8; text-align: right; padding:9px 15px;}
	.content .step5 .info_box ul li .info_2:after {content:''; clear:both; display: table;}
	.content .step5 .info_box ul li .info_2 span {display: inline-block; float:left; font-size:13px; color:#999; font-weight:400; position: relative; top:1px;}
	.content .step5 .info_box ul li .info_2 strong {width:auto; margin-right:4px;}
	.content .step5 .info_box ul li .info_2 b {width:auto; margin-left:4px;}

	.content .step5 .payment .pay_bt {position: fixed; left:0; bottom:45px; width:100%;}
	.content .step5 .payment {padding-bottom:70px;}
}










.save_letter_pop {position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); display: none; z-index: 11;}
.save_letter_pop.on {display: block;}
.save_letter_pop .view {position: absolute; left:50%; top:50%; width:90%; max-width:750px; max-height:750px; height:90vh; background:#fff; transform: translate(-50%,-50%); padding:25px 30px;}
.save_letter_pop .view h2 {font-size:18px; color:#111; font-weight:600;}
.save_letter_pop .view .save_letter_close {position: absolute; right:26px; top:24px; border:none; background:none;}
.save_letter_pop .view ul {margin-top:20px; height:calc(100% - 66px); overflow-y: scroll; padding-bottom:30px;}
.save_letter_pop .view ul::-webkit-scrollbar {display: none;}
.save_letter_pop .view ul li {padding:15px 0; border-bottom:1px solid #e4e4e4; position: relative; cursor: pointer; transition: .3s;}
/*.save_letter_pop .view ul li:hover {border:1px solid #999;}*/
.save_letter_pop .view ul li:last-child {border-bottom:none;}
.save_letter_pop .view ul li:after {content:''; clear:both; display: table;}
.save_letter_pop .view ul li .img {float:left; width:75px; height:105px; border:1px solid #eee;}
.save_letter_pop .view ul li .txt {float:right; width:calc(100% - 91px); padding:9px 5px 8px 0;}
.save_letter_pop .view ul li .txt p {font-size:14px; color:#111; font-weight:500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.save_letter_pop .view ul li .txt span {display: inline-block; width:100%; margin-top:5px;font-size:12px; color:#777; font-weight:300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.save_letter_pop .view ul li .txt b {display: inline-block; width:100%; margin-top:35px; color:#111; font-size:15px; font-weight:500;}
.save_letter_pop .view ul li .txt b strong {color:#FF6262; font-weight:600; display: inline-block; margin-right:3px;}
.save_letter_pop .view ul li .delete {position: absolute; right:17px; top:25px; border:none; background:none; font-size:13px; color:#b0b0b0;}
.save_letter_pop .view ul li .pre_txt {float:left; width:100%; margin-top:10px; font-size:13px; color:#444; line-height:1.3em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-weight:300;}
.save_letter_pop .view ul li .day {floaT:left; width:100%; font-size:12px; color:#999; margin-top:8px;}

.save_letter_pop .view ul li.on {border:1px solid #111; padding:15px;}

.save_letter_pop .view ul li.no_letter {display: flex ; height:100%; align-items: center; flex-direction: column; justify-content: center; text-align: center;font-size:14px; line-height:1.4em; color:#aaa; padding:0;}
.save_letter_pop .view ul li.no_letter img { margin-bottom:25px; margin-left:-11px;}


.save_letter_pop .view .letter_go {width:100%; height:50px; background:#111; color:#fff; font-size:16px; position:absolute; left:0; bottom:0; border:none;}



@media screen and (max-width:767px) {
	.save_letter_pop .view {padding:20px; top:0; left:0; width:100%; height:100%; max-height:initial; transform: initial;}
	.save_letter_pop .view ul li.no_letter {font-size:13px;}
	.save_letter_pop .view ul li .delete {top:96px;}
}








.img_editor_pop {position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); display: none; z-index: 11;}
.img_editor_pop.on {display: block;}
.img_editor_pop .view {position: absolute; left:50%; top:50%; width:90%; max-width:600px; max-height:692px; height:90vh; background:#fff; transform: translate(-50%,-50%); }
.img_editor_pop .view h2 {font-size:20px; color:#111; font-weight:600; padding:22px 25px;}
.img_editor_pop .view .img_editor_close {position: absolute; right:28px; top:24px; border:none; background:none;}

.img_editor_pop .view .crop_box {width:100%; height:380px; background:#eee;}

.img_editor_pop .view .ctrl {padding:18px 20px; border-bottom:1px solid #e4e4e4; position: relative;}
.img_editor_pop .view .ctrl p {font-size:13px; font-weight:300; color:#888;}
.img_editor_pop .view .ctrl p b {color:#111; font-weight:500;}
.img_editor_pop .view .ctrl .right {position: absolute; right:22px; top:18px;}
.img_editor_pop .view .ctrl .right button {float:left; font-size:13px; color:#888; font-weight:400; margin-left:23px; position: relative; border:none; background:none;}
.img_editor_pop .view .ctrl .right button:after {content:''; position: absolute; left:-12px; height:17px; width:1px; background:#efefef;}
.img_editor_pop .view .ctrl .right button:first-child:after {content:none;}

.img_editor_pop .view .swiper {padding:15px 20px}
.img_editor_pop .view .swiper .swiper-slide {width:70px !important; cursor: pointer; border:2px solid #fff;}
.img_editor_pop .view .swiper .swiper-slide.on {border:2px solid #111;}
.img_editor_pop .view .swiper .swiper-slide .img {width:100%; padding-top:150%;}
.img_editor_pop .view .swiper .swiper-slide .image_close {position: absolute; right:0; top:0; border:none; background:none;}

.img_editor_pop .view .bt_box {border-top:1px solid #e4e4e4; padding:13px 20px; position:sticky;}
.img_editor_pop .view .bt_box:after {content:''; clear:both; display: table;}
.img_editor_pop .view .bt_box button {height:30px; font-size:13px; width:80px; color:#111; font-weight:500; border:1px solid #111; float:left; background:#fff;}
.img_editor_pop .view .bt_box button.on {float:right; background:#111; color:#fff;}


@media screen and (max-width:767px) {
	.img_editor_pop .view {top:0; left:0; width:100%; height:100svh; max-height:initial; transform: initial;}
	.img_editor_pop .view h2 {font-size:18px; color:#111; font-weight:600; padding:18px 20px;}
	.img_editor_pop .view .img_editor_close {top:18px; right:18px;}
	.img_editor_pop .view .crop_box {height:calc(100svh - 291px);}
	.img_editor_pop .view .ctrl {padding:14px 15px;}
	.img_editor_pop .view .ctrl p {font-size:12px;}

	.img_editor_pop .view .ctrl .right {width:calc(100% - 30px); left:15px; top:-40px;}
	.img_editor_pop .view .ctrl .right button {height:30px; background:rgba(255,255,255,.9); width:Calc((100% - 20px) / 4); margin-right:5px; color:#888;margin-left:0; border:1px solid #e4e4e4;}
	.img_editor_pop .view .ctrl .right button:after {content:none;}
	.img_editor_pop .view .ctrl .right button:last-child {margin-right:0;}
}












.post_pop {position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); display: none; z-index: 11;}
.post_pop.on {display: block;}
.post_pop .view {position: absolute; left:50%; top:50%; width:90%; max-width:555px; max-height:650px; height:90vh; background:#fff; transform: translate(-50%,-50%); padding:15px;}

.post_pop .view ul li {display: inline-block; width:100%; margin-bottom:15px; position: relative}
.post_pop .view ul li:last-child {margin-bottom:0;}
.post_pop .view ul li input[type="radio"] {display: none;}
.post_pop .view ul li input[type="radio"] + label {width:100%; padding:10px; border:1px solid #e4e4e4; position: relative; display: inline-block; cursor: pointer;}
.post_pop .view ul li input[type="radio"] + label:after {content:''; clear:both; display: table;}
.post_pop .view ul li input[type="radio"] + label img {float:left;}
.post_pop .view ul li input[type="radio"] + label .txt {float:right; width:calc(100% - 110px); padding:7px 20px}
.post_pop .view ul li input[type="radio"] + label .txt h3 {font-size:16px; color:#111; font-weight:600;}
.post_pop .view ul li input[type="radio"] + label .txt b {font-size:15px; color:#111; font-weight:500; display: inline-block; width:100%; margin-top:2px;}
.post_pop .view ul li input[type="radio"] + label .txt b span {font-size:13px; color:#bbb; text-decoration: line-through; margin-right:5px; font-weight:300;}
.post_pop .view ul li input[type="radio"] + label .txt p {margin-top:20px; font-size:14px; line-height:1.35em; color:#555; font-weight:300;}
.post_pop .view ul li input[type="radio"] + label .txt p strong {color:#111; font-weight:600;}

.post_pop .view ul li input[type="radio"]:checked + label {border:1px solid #111; background:url('../img/post_check.svg')no-repeat center right 15px;}

.post_pop .view ul li .post_best {position: absolute; right:15px; top:0;}

.post_pop .view .bt {text-align: right; margin-top:14px;}
.post_pop .view .bt button {height:30px; margin-left:3px; width:80px; background:none; border:1px solid #111; color:#111; font-size:13px; font-weight:500;}
.post_pop .view .bt button.on {background:#111; color:#fff;}

@media screen and (max-width:767px) {
	.post_pop .view {top:0; left:0; width:100%; height:100%; max-height:initial; transform: initial; padding:10px;}
	.post_pop .view ul li {margin-bottom:10px;}
	.post_pop .view ul li input[type="radio"] + label {padding:8px;}
	.post_pop .view ul li input[type="radio"] + label img {width:90px;}
	.post_pop .view ul li input[type="radio"] + label .txt {width:calc(100% - 90px); padding:5px 15px;}
	.post_pop .view ul li input[type="radio"] + label .txt h3 {font-size:15px;}
	.post_pop .view ul li input[type="radio"] + label .txt b {font-size:14px;}
	.post_pop .view ul li input[type="radio"] + label .txt p {font-size:12px; margin-top:10px;}

	.post_pop .view .bt {position: absolute; left:0; bottom:0; width:100%;}
	.post_pop .view .bt button {float:left; width:50%; height:40px; font-size:15px; margin:0;}
}










.save_add_pop {position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); display: none; z-index: 11;}
.save_add_pop.on {display: block;}
.save_add_pop .view {position: absolute; left:50%; top:50%; width:90%; max-width:450px; max-height:650px; height:90vh; background:#fff; transform: translate(-50%,-50%); padding:22px 25px;}
.save_add_pop .view h2 {font-size:18px ;color:#111; font-weight:700; }
.save_add_pop .view .save_add_close {position: absolute; right:25px; top:25px ;border:none ;background:none;}
.save_add_pop .view .input_box {position: relative; margin-top:17px;}
.save_add_pop .view input[type="text"] {width:100%; height:40px; border-radius:6px; border:1px solid #e4e4e4; padding:0 15px 0 40px; font-size:14px; color:#222; padding-bottom:2px; }
.save_add_pop .view .input_box button {position: absolute; left:0; top:0; width:40px; height:40px; border:none; background:none; padding-bottom:2px;}
.save_add_pop .view .add_address {width:100%; height:40px; margin-top:15px; border:1px dashed #ccc; color:#777; font-weight:400; background:none; font-size:14px;}
.save_add_pop .view ul {margin-top:14px; height:calc(100% - 110px); padding-bottom:10px; overflow-y: scroll;}
.save_add_pop .view ul::-webkit-scrollbar {display: none;}
.save_add_pop .view ul:after {content:''; clear:both; display: table;}
.save_add_pop .view ul li {width:100%; border:1px solid #e4e4e4; padding:18px 20px; position: relative; cursor: pointer; transition: .3s; margin-bottom:10px;}
.save_add_pop .view ul li:hover {border:1px solid #999;}
.save_add_pop .view ul li p {font-size:15px; color:#222; font-weight:600; margin-bottom:8px;}
.save_add_pop .view ul li p b {display: inline-block; font-size:13px; padding:3px 7px;background:#222; color:#fff;  margin-right:7px; font-weight:400; position: relative; top:-1px;}
.save_add_pop .view ul li span {display: inline-block;; width:100%; font-size:13px; color:#999; line-height:1.5em; font-weight:300;}
.save_add_pop .view ul li .bt {position: absolute; right:15px; top:15px;}
.save_add_pop .view ul li .bt button {border:none; background:none; margin-left:6px;}
.save_add_pop .view ul li .basic_add {width:calc(100% + 40px); height:27px; color:#999; background:#f3f3f3; border:none; margin:15px 0 -18px -20px;}
.save_add_pop .view ul li .basic_cancel {width:calc(100% + 40px); height:27px; color:#fff; background:#222; border:none; margin:15px 0 -18px -20px;}
.save_add_pop .view ul li.on {border:1px solid #111;}
.save_add_pop .view ul li.on:after {content:''; position: absolute; left:0; top:0; width:18px; height:18px; background:url('../img/check.svg')no-repeat center #111; }

.save_add_pop .view .bt_box {position: absolute; left:0;bottom:0; width:100%;}
.save_add_pop .view .bt_box button {height:40px; border:1px solid #111; color:#111; background:none; font-size:15px; float:left; width:50%; border:none; border-top:1px solid #111;}
.save_add_pop .view .bt_box button.on {background:#111; color:#fff;}


@media screen and (max-width:767px) {
	.save_add_pop .view {top:0; left:0; width:100%; height:100%; max-height:initial; transform: initial; padding:15px 20px; max-width:100%;}
	.save_add_pop .view .save_add_close {top:16px; right:20px;}
	.save_add_pop .view ul {height:calc(100% - 117px)}
}










.add_pop .bg {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.45); z-index:1000; display: none;}
.add_pop .view {position: fixed; left:50%; top:initial; bottom:-100%; transform: translate(-50%,0); background:#fff; max-width:400px; width:90%; padding:22px 25px 70px 25px; transition: .4s; z-index: 1001; transition: .3s;}
.add_pop .view h2 {font-size:18px; color:#000; font-weight:600;}

.add_pop .gray {width:100%; padding:20px 0; text-align: center; margin:20px 0 10px 0; background:#f6f6f6; border-radius:6px; font-size:18px; color:#111; font-weight:500; }
.add_pop .gray b {color:#4285F4; font-family: 'GmarketSans'; font-size:22px; display: inline-block; margin:0 1px 0 5px;}
.add_pop .gray br {display: none;}


.add_pop .box .input_box {margin-top:20px; position: relative;}
.add_pop .box .input_box span {display: inline-block; width:100%; font-size:14px; color:#555; font-weight:400; margin-bottom:3px;}
.add_pop .box .input_box span b {color:#FF6262; font-weight:300; position: relative; left:4px; top:-1px;}
.add_pop .box .input_box input[type="text"] {width:100%; height:40px; border:1px solid #e4e4e4; padding:0 12px; font-size:14px; border-radius:4px; margin-top:5px;}
.add_pop .box .input_box .search {position: absolute; right:0; top:25px; width:40px; height:40px; border:none; background:none; padding-bottom:2px; opacity: .4;}
.add_pop .box .input_box .search img {width:22px;}


.add_pop .view .bt_box {position: absolute; left:0px; bottom:0px; width:100%;}
.add_pop .view .bt_box button {float:left;height:40px; width:50%; background:#fff; color:#111; font-size:15px; font-weight:500; border:none; border-top:1px solid #111;}
.add_pop .view .bt_box button.on {background:#111; color:#fff; border:none; }

.add_pop.on .bg {display: block;}
@media screen and (min-width:768px) {
	.add_pop.on .view {top:50%; transform: translate(-50%,-50%); bottom:initial;}
}

@media screen and (max-width:767px) {
	.add_pop .view {left:0; bottom:-575px; transform: translate(0,0);border-radius:10px 10px 0 0; padding:25px 20px; height:575px; max-width:100%; width:100%;}
	.add_pop.on .view {bottom:0px; }
	.add_pop .view .bt_box button.on {border-radius:0;}
	.add_pop .gray {padding:16px 0;}
	.add_pop .gray p {line-height:1.5em; font-size:18px;}
	.add_pop .gray br {display: block;}
	.add_pop .box .input_box .select {width:130px;}
	.add_pop .box .input_box.account_input input[type="text"] {width:calc(100% - 135px);}
}









.sel_pay .bg {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.45); z-index:10; display: none;}
.sel_pay .view {position: fixed; left:50%; top:initial; bottom:-100%; transform: translate(-50%,0); background:#fff; max-width:430px; width:90%; padding:25px 30px 70px 30px; transition: .4s; z-index: 11; transition: .3s;}
.sel_pay .view h2 {font-size:18px; color:#000; font-weight:600;}

.sel_pay .view .sel_pay_close {position: absolute; right:15px; top:15px; border:none; background:none;}

.sel_pay .view .box {margin-top:20px;}
.sel_pay .view .box:after {content:''; clear:both; display: table}
.sel_pay .view .box button {float:left; width:calc((100% - 20px) / 3); margin-right:10px; height:115px; border:1px solid #e4e4e4; color:#999; background:#fff; font-size:14px; font-weight:500;}
.sel_pay .view .box button.on {border:1px solid #111; color:#111; font-weight:600;}
.sel_pay .view .box button img {margin-bottom:8px;}
.sel_pay .view .box button:last-child {margin-right:0;}
.sel_pay .view .sel_pay_bt {height:42px; width:100%; background:#111; color:#fff; font-size:15px; font-weight:500; border:none; position: absolute; left:0; bottom:0;}

.sel_pay.on .bg {display: block;}
@media screen and (min-width:768px) {
	.sel_pay.on .view {top:50%; transform: translate(-50%,-50%); bottom:initial;}
}

@media screen and (max-width:767px) {
	.sel_pay .view {left:0; bottom:-243px; transform: translate(0,0);border-radius:10px 10px 0 0; padding:25px 20px; height:243px; max-width:100%; width:100%;}
	.sel_pay.on .view {bottom:0px; }
	.sel_pay .view .bt_box button.on {border-radius:0;}
	.sel_pay .gray {padding:16px 0;}
	.sel_pay .gray p {line-height:1.5em; font-size:18px;}
	.sel_pay .gray br {display: block;}
	.sel_pay .box .input_box .select {width:130px;}
	.sel_pay .box .input_box.account_input input[type="text"] {width:calc(100% - 135px);}
}












/* 앱용 */
.no_hd header {padding:0; height:0;}
.no_hd header .logo {display: none;}
.no_hd .content .step_hd {display: none;}
.no_hd nav .bt_box .bt {display: none;}
.no_hd .content {margin-top:0;}




.content .cont .view ul li .bg.medium textarea {
	--line-h: 20px ;
	line-height: var(--line-h) !important;
}





#area_cont {
	transition: transform 0.2s ease;
}

.contentLi {
	overflow: visible;
}

.bg {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.contentLi {
	-webkit-overflow-scrolling: touch;
}