@charset "utf-8"; /* noto-sans-kr-300 - latin */ @font-face { font-family: 'NotoSansKR'; font-weight: 100; font-style: normal; src: url('/resources/common/fonts/NotoSansKR-Thin.eot'); src: url('/resources/common/fonts/NotoSansKR-Thin.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NotoSansKR-Thin.woff2') format('woff2'), url('/resources/common/fonts/NotoSansKR-Thin.woff') format('woff'), url('/resources/common/fonts/NotoSansKR-Thin.ttf') format("truetype"), url('/resources/common/fonts/NotoSansKR-Thin.svg#NotoSansKR-Thin') format('svg'); font-display: swap; } @font-face { font-family: 'NotoSansKR'; font-weight: 300; font-style: normal; src: url('/resources/common/fonts/NotoSansKR-Light.eot'); src: url('/resources/common/fonts/NotoSansKR-Light.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NotoSansKR-Light.woff2') format('woff2'), url('/resources/common/fonts/NotoSansKR-Light.woff') format('woff'), url('/resources/common/fonts/NotoSansKR-Light.ttf') format("truetype"), url('/resources/common/fonts/NotoSansKR-Light.svg#NotoSansKR-Light') format('svg'); font-display: swap; } @font-face { font-family: 'NotoSansKR'; font-weight: 400; font-style: normal; src: url('/resources/common/fonts/NotoSansKR-Regular.eot'); src: url('/resources/common/fonts/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NotoSansKR-Regular.woff2') format('woff2'), url('/resources/common/fonts/NotoSansKR-Regular.woff') format('woff'), url('/resources/common/fonts/NotoSansKR-Regular.ttf') format("truetype"), url('/resources/common/fonts/NotoSansKR-Regular.svg#NotoSansKR-Regular') format('svg'); font-display: swap; } @font-face { font-family: 'NotoSansKR'; font-weight: 500; font-style: normal; src: url('/resources/common/fonts/NotoSansKR-Medium.eot'); src: url('/resources/common/fonts/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NotoSansKR-Medium.woff2') format('woff2'), url('/resources/common/fonts/NotoSansKR-Medium.woff') format('woff'), url('/resources/common/fonts/NotoSansKR-Medium.ttf') format("truetype"), url('/resources/common/fonts/NotoSansKR-Medium.svg#NotoSansKR-Medium') format('svg'); font-display: swap; } @font-face { font-family: 'NotoSansKR'; font-weight: 700; font-style: normal; src: url('/resources/common/fonts/NotoSansKR-Bold.eot'); src: url('/resources/common/fonts/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NotoSansKR-Bold.woff2') format('woff2'), url('/resources/common/fonts/NotoSansKR-Bold.woff') format('woff'), url('/resources/common/fonts/NotoSansKR-Bold.ttf') format("truetype"), url('/resources/common/fonts/NotoSansKR-Bold.svg#NotoSansKR-Bold') format('svg'); font-display: swap; } @font-face { font-family: 'NotoSansKR'; font-weight: 900; font-style: normal; src: url('/resources/common/fonts/NotoSansKR-Black.eot'); src: url('/resources/common/fonts/NotoSansKR-Black.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NotoSansKR-Black.woff2') format('woff2'), url('/resources/common/fonts/NotoSansKR-Black.woff') format('woff'), url('/resources/common/fonts/NotoSansKR-Black.ttf') format("truetype"), url('/resources/common/fonts/NotoSansKR-Black.svg#NotoSansKR-Black') format('svg'); font-display: swap; } @font-face { font-family: 'SCoreDreamLight'; font-style: normal; src: url('/resources/common/fonts/SCoreDreamLight.eot'); src: url('/resources/common/fonts/SCoreDreamLight.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SCoreDreamLight.woff2') format('woff2'), url('/resources/common/fonts/SCoreDreamLight.woff') format('woff'), url('/resources/common/fonts/SCoreDreamLight.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SCoreDreamRegular'; font-style: normal; src: url('/resources/common/fonts/SCoreDreamRegular.eot'); src: url('/resources/common/fonts/SCoreDreamRegular.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SCoreDreamRegular.woff2') format('woff2'), url('/resources/common/fonts/SCoreDreamRegular.woff') format('woff'), url('/resources/common/fonts/SCoreDreamRegular.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SCoreDreamMedium'; font-style: normal; src: url('/resources/common/fonts/SCoreDreamMedium.eot'); src: url('/resources/common/fonts/SCoreDreamMedium.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SCoreDreamMedium.woff2') format('woff2'), url('/resources/common/fonts/SCoreDreamMedium.woff') format('woff'), url('/resources/common/fonts/SCoreDreamMedium.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SCoreDreamBold'; font-style: normal; src: url('/resources/common/fonts/SCoreDreamBold.eot'); src: url('/resources/common/fonts/SCoreDreamBold.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SCoreDreamBold.woff2') format('woff2'), url('/resources/common/fonts/SCoreDreamBold.woff') format('woff'), url('/resources/common/fonts/SCoreDreamBold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SCoreDreamExtraBold'; font-style: normal; src: url('/resources/common/fonts/SCoreDreamExtraBold.eot'); src: url('/resources/common/fonts/SCoreDreamExtraBold.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SCoreDreamExtraBold.woff2') format('woff2'), url('/resources/common/fonts/SCoreDreamExtraBold.woff') format('woff'), url('/resources/common/fonts/SCoreDreamExtraBold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SCoreDreamHeavy'; font-style: normal; src: url('/resources/common/fonts/SCoreDreamHeavy.eot'); src: url('/resources/common/fonts/SCoreDreamHeavy.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SCoreDreamHeavy.woff2') format('woff2'), url('/resources/common/fonts/SCoreDreamHeavy.woff') format('woff'), url('/resources/common/fonts/SCoreDreamHeavy.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SCoreDreamBlack'; font-style: normal; src: url('/resources/common/fonts/SCoreDreamBlack.eot'); src: url('/resources/common/fonts/SCoreDreamBlack.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SCoreDreamBlack.woff2') format('woff2'), url('/resources/common/fonts/SCoreDreamBlack.woff') format('woff'), url('/resources/common/fonts/SCoreDreamBlack.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'LibreBarcode128Text-Regular'; font-style: normal; /* font-weight: 700; */ src: url('/resources/common/fonts/LibreBarcode128Text-Regular.eot'); /* IE9 Compat Modes */ src: local('LibreBarcode128Text-Regular'), url('/resources/common/fonts/LibreBarcode128Text-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/resources/common/fonts/LibreBarcode128Text-Regular.woff') format('woff'), /* Modern Browsers */ url('/resources/common/fonts/LibreBarcode128Text-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/resources/common/fonts/LibreBarcode128Text-Regular.svg#LibreBarcode128Text-Regular') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'POP_Brush'; src: url('/resources/common/fonts/WPOPBrush.eot'); src: url('/resources/common/fonts/WPOPBrush.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/WPOPBrush.woff2') format('woff2'), url('/resources/common/fonts/POP_Brush.woff') format('woff'), url('/resources/common/fonts/POP_Brush.ttf') format('truetype'), url('/resources/common/fonts/POP_Brush.svg#POP_Brush') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'watermelon'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/116watermelon.eot'); src: url('/resources/common/fonts/116watermelon.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/116watermelon.woff2') format('woff2'), url('/resources/common/fonts/116watermelon.woff') format('woff'), url('/resources/common/fonts/116watermelon.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'ChangwonDangamAsac'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/ChangwonDangamAsac.eot'); src: url('/resources/common/fonts/ChangwonDangamAsac.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/ChangwonDangamAsac.woff2') format('woff2'), url('/resources/common/fonts/ChangwonDangamAsac.woff') format('woff'), url('/resources/common/fonts/ChangwonDangamAsac.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'CrownMychew'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/CrownMychew.eot'); src: url('/resources/common/fonts/CrownMychew.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/CrownMychew.woff2') format('woff2'), url('/resources/common/fonts/CrownMychew.woff') format('woff'), url('/resources/common/fonts/CrownMychew.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'TangsBudaeJjigae_Light'; font-style: normal; src: url('/resources/common/fonts/TangsBudaeJjigae_Light.eot'); src: url('/resources/common/fonts/TangsBudaeJjigae_Light.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/TangsBudaeJjigae_Light.woff2') format('woff2'), url('/resources/common/fonts/TangsBudaeJjigae_Light.woff') format('woff'), url('/resources/common/fonts/TangsBudaeJjigae_Light.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'TangsBudaeJjigae_Medium'; font-style: normal; src: url('/resources/common/fonts/TangsBudaeJjigae_Medium.eot'); src: url('/resources/common/fonts/TangsBudaeJjigae_Medium.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/TangsBudaeJjigae_Medium.woff2') format('woff2'), url('/resources/common/fonts/TangsBudaeJjigae_Medium.woff') format('woff'), url('/resources/common/fonts/TangsBudaeJjigae_Medium.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'TangsBudaeJjigae_Bold'; font-style: normal; src: url('/resources/common/fonts/TangsBudaeJjigae_Bold.eot'); src: url('/resources/common/fonts/TangsBudaeJjigae_Bold.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/TangsBudaeJjigae_Bold.woff2') format('woff2'), url('/resources/common/fonts/TangsBudaeJjigae_Bold.woff') format('woff'), url('/resources/common/fonts/TangsBudaeJjigae_Bold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'GimpoBatang'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/GimpoBatang.eot'); src: url('/resources/common/fonts/GimpoBatang.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/GimpoBatang.woff2') format('woff2'), url('/resources/common/fonts/GimpoBatang.woff') format('woff'), url('/resources/common/fonts/GimpoBatang.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'GimpoGothic'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/GimpoGothic-Regular.eot'); src: url('/resources/common/fonts/GimpoGothic-Regular.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/GimpoGothic-Regular.woff2') format('woff2'), url('/resources/common/fonts/GimpoGothic-Regular.woff') format('woff'), url('/resources/common/fonts/GimpoGothic-Regular.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'GimpoGothic-Bold'; font-style: normal; src: url('/resources/common/fonts/GimpoGothic-Bold.eot'); src: url('/resources/common/fonts/GimpoGothic-Bold.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/GimpoGothic-Bold.woff2') format('woff2'), url('/resources/common/fonts/GimpoGothic-Bold.woff') format('woff'), url('/resources/common/fonts/GimpoGothic-Bold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'GimpoTitle'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/GimpoTitle.eot'); src: url('/resources/common/fonts/GimpoTitle.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/GimpoTitle.woff2') format('woff2'), url('/resources/common/fonts/GimpoTitle.woff') format('woff'), url('/resources/common/fonts/GimpoTitle.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'NanumBarunpen'; font-weight: 400; font-style: normal; src: url('/resources/common/fonts/NanumBarunpen-Regular.eot'); src: url('/resources/common/fonts/NanumBarunpen-Regular.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NanumBarunpen-Regular.woff2') format('woff2'), url('/resources/common/fonts/NanumBarunpen-Regular.woff') format('woff'), url('/resources/common/fonts/NanumBarunpen-Regular.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'NanumMyeongjo'; font-style: normal; src: url('/resources/common/fonts/NanumMyeongjo.eot'); src: url('/resources/common/fonts/NanumMyeongjo.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NanumMyeongjo.woff2') format('woff2'), url('/resources/common/fonts/NanumMyeongjo.woff') format('woff'), url('/resources/common/fonts/NanumMyeongjo.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'NanumMyeongjoBold'; font-style: normal; src: url('/resources/common/fonts/NanumMyeongjoBold.eot'); src: url('/resources/common/fonts/NanumMyeongjoBold.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NanumMyeongjoBold.woff2') format('woff2'), url('/resources/common/fonts/NanumMyeongjoBold.woff') format('woff'), url('/resources/common/fonts/NanumMyeongjoBold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'NanumMyeongjoExtraBold'; font-style: normal; src: url('/resources/common/fonts/NanumMyeongjoExtraBold.eot'); src: url('/resources/common/fonts/NanumMyeongjoExtraBold.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/NanumMyeongjoExtraBold.woff2') format('woff2'), url('/resources/common/fonts/NanumMyeongjoExtraBold.woff') format('woff'), url('/resources/common/fonts/NanumMyeongjoExtraBold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'Ansungtangmyun'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/Ansungtangmyun-Bold.eot'); src: url('/resources/common/fonts/Ansungtangmyun-Bold.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/Ansungtangmyun-Bold.woff2') format('woff2'), url('/resources/common/fonts/Ansungtangmyun-Bold.woff') format('woff'), url('/resources/common/fonts/Ansungtangmyun-Bold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SaenggeoJincheon'; font-style: normal; src: url('/resources/common/fonts/SaenggeoJincheon.eot'); src: url('/resources/common/fonts/SaenggeoJincheon.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SaenggeoJincheon.woff2') format('woff2'), url('/resources/common/fonts/SaenggeoJincheon.woff') format('woff'), url('/resources/common/fonts/SaenggeoJincheon.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SuseongBatang'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/SuseongBatang.eot'); src: url('/resources/common/fonts/SuseongBatang.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SuseongBatang.woff2') format('woff2'), url('/resources/common/fonts/SuseongBatang.woff') format('woff'), url('/resources/common/fonts/SuseongBatang.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SuseongDotum'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/SuseongDotum.eot'); src: url('/resources/common/fonts/SuseongDotum.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SuseongDotum.woff2') format('woff2'), url('/resources/common/fonts/SuseongDotum.woff') format('woff'), url('/resources/common/fonts/SuseongDotum.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'SuseongHyejeong'; font-weight: normal; font-style: normal; src: url('/resources/common/fonts/SuseongHyejeong.eot'); src: url('/resources/common/fonts/SuseongHyejeong.eot?#iefix') format('embedded-opentype'), url('/resources/common/fonts/SuseongHyejeong.woff2') format('woff2'), url('/resources/common/fonts/SuseongHyejeong.woff') format('woff'), url('/resources/common/fonts/SuseongHyejeong.ttf') format("truetype"); font-display: swap; } .NotoSansKR{ font-family: 'NotoSansKR'; } .POP_Brush{ font-family: 'POP_Brush'; } .SCoreDreamLight{ font-family: 'SCoreDreamLight'; } .SCoreDreamRegular{ font-family: 'SCoreDreamRegular'; } .SCoreDreamMedium{ font-family: 'SCoreDreamMedium'; } .SCoreDreamBold{ font-family: 'SCoreDreamBold'; } .SCoreDreamExtraBold{ font-family: 'SCoreDreamExtraBold'; } .SCoreDreamHeavy{ font-family: 'SCoreDreamHeavy'; } .SCoreDreamBlack{ font-family: 'SCoreDreamBlack'; } .LibreBarcode128Text-Regular{font-family: 'LibreBarcode128Text-Regular', cursive; } .watermelon{ font-family: 'watermelon'; } .ChangwonDangamAsac{ font-family: 'ChangwonDangamAsac'; } .CrownMychew{ font-family: 'CrownMychew'; } .TangsBudaeJjigae_Light{ font-family: 'TangsBudaeJjigae_Light'; } .TangsBudaeJjigae_Medium{ font-family: 'TangsBudaeJjigae_Medium'; } .TangsBudaeJjigae_Bold{ font-family: 'TangsBudaeJjigae_Bold'; } .GimpoBatang{ font-family: 'GimpoBatang'; } .GimpoGothic{ font-family: 'GimpoGothic'; } .GimpoGothic-Bold{ font-family: 'GimpoGothic-Bold'; } .GimpoTitle{ font-family: 'GimpoTitle'; } .NanumBarunpen{ font-family: 'NanumBarunpen'; } .NanumMyeongjo{ font-family: 'NanumMyeongjo'; } .NanumMyeongjoBold{ font-family: 'NanumMyeongjoBold'; } .NanumMyeongjoExtraBold{ font-family: 'NanumMyeongjoExtraBold'; } .Ansungtangmyun{ font-family: 'Ansungtangmyun'; } .SaenggeoJincheon{ font-family: 'SaenggeoJincheon'; } .SuseongBatang{ font-family: 'SuseongBatang'; } .SuseongDotum{ font-family: 'SuseongDotum'; } .SuseongHyejeong{ font-family: 'SuseongHyejeong'; } /*=============================== (구)이벤트등록 및 POP인쇄 ===============================*/ /* 배너 탬플릿 01 */ .temp01.item-top-banner-frame { width: 100%; margin-bottom: 10px; } .temp01 .item-top-banner-conts { background-color: #ff5b5b; text-align: center; padding: 10px 0; margin: 0; position: relative; } .temp01 .item-top-banner-conts>i { display: inline-block; width: 10px; height: 10px; font-size: 0; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; left: 20px; margin-top: -5px; } .temp01 .item-top-banner-conts>i:last-child { left: auto; right: 20px; } .temp01 .item-top-banner-title { font-size: 26px; font-weight: bold; color: #fff; vertical-align: middle; padding-right: 10px; text-shadow: 3px 2px #b92828; } .temp01 .item-top-banner-img { width: 120px; vertical-align: middle; } /* 상품 추가 탬플릿 01 */ .temp01.item-add-frame { width: 100%; display: table; border: 1px solid #ddd; box-shadow: 2px 2px #f7f7f7; overflow: hidden; margin-bottom: 5px; } .temp01.type-img .item-img-box { width: 100px; float: left; background: transparent; border: 0; outline: 0; padding: 0 10px; margin: 0; } .temp01.type-img .item-img-box img { width: 100%; height: auto; } .temp01 .item-txt-box { display: table-cell; width: 100%; padding: 10px; vertical-align: middle; text-align: left; } .temp01 .item-name { font-size: 16px; line-height: 21px; font-weight: bold; color: #333; } .temp01.type-txt .item-name { display: inline-block; padding-left: 10px; } .temp01 .item-price { display: block; padding-top: 5px; font-size: 14px; line-height: 18px; color: #ef2b2b; } .temp01.type-txt .item-price { display: inline-block; padding-top: 0; padding-left: 10px; } .temp01 .item-price>strong { font-size: 15px; font-weight: bold; padding-right: 2px; } .temp01 .item-price>small { padding-right: 10px; } /* POP 탬플릿 시작 */ /* POP 용지 방향 선택 버튼 */ .paper_choice>.btn:hover, .paper_choice>.btn.on { color: #445a7e; border: 1px solid #c0ccdc; background: #edf5ff; } /* POP 레이아웃 선택 */ .pop-layout-select { height: 100px; overflow-x: auto; } .pop-layout-type { font-size: 0; text-align: left; } .pop-layout-type.a4v .pop-print-page { width: 63px; height: 90px; } .pop-layout-type.a4h .pop-print-page { width: 90px; height: 63px; } .pop-layout-box { display: inline-block; padding: 2px; cursor: pointer; } .pop-template-select .pop-print-page { cursor: pointer; } .pop-layout-box:hover .pop-print-page, .pop-layout-box.on .pop-print-page, .pop-template-select .pop-template-box .pop-print-page:hover, .pop-template-box.on .pop-print-page { border: 1px solid #5275c5; box-shadow: 1px 1px 2px #5275c5; } /* POP 옵션(추가문구,원판매가,거래처,규격,이미지있는 상품만) 선택 */ .pop-conts-checkbox>.check_box { margin: 5px 20px 0px 5px; } .pop-conts-checkbox>.check_box:last-child { margin-right: 0; } .add_text_write-area { width: 50%; float: left; padding: 5px; font-size: 0; } .add_text_write-area>span { display: inline-block; max-width: 210px; font-size: 0; position: relative; } .add_text_write-area input[type="text"] { padding-right: 30px; } .add_text_write-area .btn { padding: 0; position: absolute; top: -1px; right: -1px; } .add_text_write-area .btn>img { margin: 0; } /* POP 용지 레이아웃 선택 */ .pop-template-select { height: 450px; overflow-x: auto; } .pop-template-box { padding: 10px; margin: 0 auto; min-width: 300px; } .pop-template-box .pop-print-page { padding: 6px; } .pop-print-page { width: 284px; height: 400px; border: 1px solid #ddd; margin: 0 auto; overflow: hidden; } .pop-print-page[data-layout="landscape"] { width: 400px; height: 284px; } .pop-print-page[data-size="A4"] { width: 210mm; height: 297mm; padding: 6mm; } .pop-print-page[data-size="A4"][data-layout="landscape"] { width: 297mm; height: 208mm; } /* POP미리보기 인쇄 버튼 */ .fix-printbtn { position: fixed; right: 15%; top: 5vw; padding: 50px 10px 5px 10px; border: 1px solid #445a7e; background:url(http://manager.shopnshop.net/MallImage/POP_Image/Image/public_Sample/printImg.png)no-repeat 50% 28%; background-color: #5275c5; background-size: 35px; color: #fff; font-weight: bold; border-radius: 10px; box-shadow: 2px 2px 1px #bfbfbf; cursor: pointer; } .fix-closebtn { position: fixed; right: 15%; top: 10vw; padding: 4px 23px 5px 23px; border: 1px solid #445a7e; background-color: #354052; background-size: 35px; color: #fff; font-weight: bold; border-radius: 5px; box-shadow: 2px 2px 1px #bfbfbf; cursor: pointer; } .fix-closebtn:hover, .fix-printbtn:hover { box-shadow: none; } /* POP 공통 폰트 사이즈 */ .pop-print-page * { font-size: 32px; } .pop-print-page.v4h1 *, .pop-print-page.v4h2 * { font-size: 24px; } .pop-print-page.v6h2 *, .pop-print-page.v9h3 * { font-size: 12px; } .pop-print-page[data-size="A4"] * { font-size: 90px; } .v6h2[data-size="A4"] * { font-size: 54px; } .v9h3[data-size="A4"] * { font-size: 42px; } /* POP COMMONE CLASS STYLE */ .page-break-cover { visibility: hidden; } .page-break-cover:last-child { display: none; } .page-break-margin { width: 100%; height: 50px; } .display-table { display: table; table-layout: fixed; padding: 1%; overflow: hidden; } .display-table-cell { display: table-cell; vertical-align: middle; } .font_cut { white-space: nowrap ! important; word-break: keep-all ! important; } .pop-print-page span { display: inline-block; } .pop-print-page .pop-canvas small { font-size: 0.3em; line-height: 0.32em; } .pop-canvas { width: 100%; height: 100%; background-color: #fff; border: 1px solid #ddd; overflow: hidden; float: left; } .pop-canvas-inner { width: 100%; height: 100%; background-repeat:no-repeat; background-position: 50% 0%; background-size: contain; position: relative; } .pop-item-conts.top { width: 100%; height: 45%; } .pop-item-conts.middle { width: 100%; height: 45%; } .pop-item-conts.bottom { width: 100%; height: 5%; } /* 거래처,규격 */ .pop-print-page .pop-item-busname, .pop-print-page .pop-item-busname>span{ font-size: 0.7em; line-height: 1em; } .pop-item-busname { text-align: center; color: #555; } .pop-print-page .pop-item-spec, .pop-print-page .pop-item-spec span{ font-size: 0.7em; line-height: 1em; } .pop-item-spec { text-align: center; } /* 상품명 */ .pop-print-page .pop-item-name, .pop-print-page .pop-item-name span{ font-size: 1em; line-height: 1.3em; } .pop-item-name { text-align: center; margin: 1% 0; clear: both; } .pop-item-name span { border-bottom: 1px solid #ddd; } .noto .pop-item-name span { font-weight: bold; } /* 가격 */ .pop-print-page .pop-item-price-area, .pop-print-page .pop-item-price-area span{ font-size: 0.8em; line-height: 0.82em; } .pop-item-price-area { padding: 0 1.5%; } .pop-item-price { color: #888; position: relative; } .pop-print-page .pop-item-sale, .pop-print-page .pop-item-sale span{ font-size: 1.23em; line-height: 1.25em; } .pop-item-sale { width: 100%; font-weight: bold; text-align: right; color: #ee4949; } /* 취소선 */ .pop-item-cancel_line { display: inline-block; width: 100%; height: 2px; background: #ee4949; margin-top: -1px; position: absolute; top: 50%; left: 0; } .pop-item-cancel_line:before { content: ""; display: block; width: 17px; height: 2px; background: #ee4949; position: absolute; top: 8px; right: -3px; -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); } .pop_Brush .pop-item-cancel_line:before { top: 7px; right: -4px; } .pop-print-page[data-size="A4"] .pop-item-cancel_line { height: 4px; margin-top: -2px; } .pop-print-page[data-size="A4"] .pop-item-cancel_line:before { width: 44px; height: 4px; top: 20px; right: -9px; } .pop-print-page[data-size="A4"] .pop_Brush .pop-item-cancel_line:before{ width: 47px; top: 20px; right: -10px; } /* 추가문구1,2 */ .pop-print-page .pop-item-add_text1, .pop-print-page .pop-item-add_text1>span { font-size: 1em; line-height: 1.02em; text-align: center; } .pop-item-add_text1 { width: 100%; color: #fee900; font-weight: bold; text-shadow: 3px 3px #75100e; } .pop-print-page .pop-item-add_text2, .pop-print-page .pop-item-add_text2 span { font-size: 0.42em; line-height: 1em; } .pop-item-add_text2 { text-align: right; } /* 상품이미지 */ .pop-item-img { width: 26mm; height: 26mm; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; overflow: hidden; } .pop-item-img i { display: block; width: 100%; height: 100%; background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/no_img_arrow.png)no-repeat 50% 100%; background-size: 100%; } .pop-print-page .pop-item-img b { width: 100%; height: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #000; font-size: 10px; font-style: italic; border: 1px solid #ddd; opacity: 0.5; } .pop-item-img img { width: 100%; height: auto; } .pop-print-page[data-size="A4"] .a4_v1h1 .pop-item-img{ width: 80mm; height: 80mm; } .pop-print-page[data-size="A4"] .a4_v1h1.temp04 .img-box, .pop-print-page[data-size="A4"] .a4_v1h1.temp04 .pop-item-img { width: 120mm; height: 120mm; } .pop-print-page[data-size="A4"] .a4_v1h1.temp04 .pop-item-add_text1 >span:after{ left: -9mm; width: 8mm; height: 8mm; } /* POP A4세로 */ /* POP A4세로 a4_v1h1 */ .a4_v1h1 .pop-item-conts.top .display-table-cell { padding-top: 25%; } .a4_v1h1 .pop-item-conts.middle { text-align: right; } .a4_v1h1 .pop-item-conts.bottom { position: absolute; right: 0; bottom: 0; } .a4_v1h1 .pop-item-add_text1 { padding: 3% 0 7% 0; position: absolute; top: 2%; } .a4_v1h1 .pop-item-add_text2 { color: #fff; } /* ===== temp01 ===== */ .a4_v1h1.temp01 .pop-item-conts.middle { padding: 1% 5%; } .a4_v1h1.temp01 .pop-item-conts.bottom { background-color: #ee4949; } .a4_v1h1.temp01 .pop-item-price-area { margin-top: -7%; } /* ===== temp02 ===== */ .a4_v1h1.temp02 .pop-item-add_text1 { padding: 4% 26% 7% 0; text-align: right; } .a4_v1h1.temp02 .pop-item-conts-inner, .a4_v1h1.temp02 .pop-item-sale { text-align: center; } .a4_v1h1.temp02 .pop-item-price-area { margin-top: 0; } .a4_v1h1.temp02 .pop-item-add_text2 { text-align: center; color: #888; } /* ===== temp03 ===== */ .a4_v1h1.temp03 .pop-item-conts.top { height: 48%; } .a4_v1h1.temp03 .pop-item-conts.top .display-table-cell { padding-top: 30%; } .a4_v1h1.temp03 .pop-item-conts-inner, .a4_v1h1.temp03 .pop-item-sale { text-align: center; } .a4_v1h1.temp03 .pop-item-add_text1 { width: 70%; text-align: left; padding-top: 6%; padding-left: 2%; font-size: 1.05em; text-shadow: 5px 2px #c71c17; } .a4_v1h1.temp03 .pop-item-add_text2 { width: 30%; text-align: center; line-height: 1em; position: absolute; top: 15%; right: 3.5%; } .a4_v1h1.temp03 .pop-item-add_text2 span { font-size: 2em; color: #fff; font-weight: bold; text-shadow: 6px 4px #ac1d1a; } .a4_v1h1.temp03 .pop-item-add_text2 small { color: #fff; font-size: 0.8em; font-weight: bold; } .a4_v1h1.temp04 { background-size:cover; } .a4_v1h1.temp04 .pop-item-add_text1 { color: #000; text-shadow: none; } .a4_v1h1.temp04 .pop-item-add_text1 >span{ border-bottom:2px solid #000; display:inline-block; padding-bottom:10px; position:relative; } .a4_v1h1.temp04 .pop-item-add_text1 >span:after{ content: ""; display: inline-block; background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4_v1h1_temp04_1stamp.png)no-repeat 50% 50% / contain; position: absolute; top: -2px; left: -5mm; width: 4mm; height: 4mm; } .a4_v1h1.temp04 .pop-item-add_text2 { color: #000; text-align:center; } .a4_v1h1.temp04 .pop-item-add_text2 >span{ font-size: 1em; } .a4_v1h1.temp04 .pop-item-name span{ border:0; } .a4_v1h1.temp04 .pop-item-sale{ text-align: center; font-size: 0.9em; color: #d43e38; } .a4_v1h1.temp04 .pop-item-img{ width: 40mm; height:40mm; } .a4_v1h1.temp04 .img-box{ width: 40mm; height:40mm; margin:10% auto 4% auto; position:relative; } .a4_v1h1.temp04 .img-box:before { content: ""; display: block; width: 104%; height: 104%; border: 3px solid #000; background: transparent; position: absolute; top: -2.5%; left: -2.5%; } .a4_v1h1.temp04 .img-box:after { content: ""; display: block; width: 94%; height: 94%; border: 1px solid #000; background: transparent; position: absolute; top: 3%; left: 3%; } .a4_v1h1.temp04 .pop-item-conts{ height:auto; } .a4_v1h1.temp04 .pop-item-name, .a4_v1h1.temp04 .pop-item-name span { font-size: 0.8em; line-height: 1em; } /* POP A4세로 2등분 a4_v1h1 */ .pop-print-page[data-size="A4"] .a4_v2h1.pop_Brush * { letter-spacing: 5px; } .pop-print-page.v2h1 .pop-canvas-inner { padding: 1%; } .a4_v2h1 .pop-item-conts.top { height: 25%; } .a4_v2h1 .pop-item-conts.middle { height: 45%; } .a4_v2h1 .pop-item-conts.bottom { height: 40%; } /* ===== temp01 ===== */ .a4_v2h1.temp01 .pop-item-conts.middle { height: 40%; } .a4_v2h1.temp01 .pop-item-conts.bottom { height: 32%; } .pop-print-page.v2h1 .temp01.pop-canvas-inner { background-color: #ee4949; } .a4_v2h1.temp01 .pop-item-conts.middle, .a4_v2h1.temp01 .pop-item-conts.bottom { background-color: #fff; } .a4_v2h1.temp01 .pop-item-add_text1, .a4_v2h1.temp01 .pop-item-add_text1 span { line-height: 1.2em; } .a4_v2h1.temp01 .pop-item-name, .a4_v2h1.temp01 .pop-item-name span { font-size: 0.85em; line-height: 1.2em; } .a4_v2h1.temp01 .pop-item-sale, .a4_v2h1.temp01 .pop-item-sale span { font-size: 1.1em; } .a4_v2h1.temp01 .pop-item-sale { line-height: 0.8em; padding: 0; text-align: center; } /* ===== temp02 ===== */ .a4_v2h1.temp02 .pop-item-conts.top { height: 10%; } .a4_v2h1.temp02 .pop-item-conts.middle { height: 40%; } .a4_v2h1.temp02 .pop-item-conts.bottom { text-align: left; padding: 0 5%; } .a4_v2h1.temp02 .pop-item-price-area { padding-left: 10%; } .a4_v2h1.temp02 .pop-item-name { border-bottom: 3px solid #354052; } .a4_v2h1.temp02 .pop-item-name span { border-bottom: 0; } .a4_v2h1.temp02 .pop-item-busname { width: 50%; float: left; text-align: left; padding-left: 2%; padding-bottom: 0; } .a4_v2h1.temp02 .pop-item-spec { width: 50%; float: right; text-align: right; padding-right: 2%; color: #099bd8; } .a4_v2h1.temp02 .pop-item-add_text1, .a4_v2h1.temp02 .pop-item-add_text1 span { font-size: 0.6em; line-height: 0.8em; text-align: right; } .a4_v2h1.temp02 .pop-item-add_text1 span { color: #fee900; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } /* ===== temp02_1 ===== */ .a4_v2h1.temp02_1 .pop-item-add_text1 span { font-size: 0.6em; } .a4_v2h1.temp02_1 .pop-item-conts.middle { padding: 0 5%; } .a4_v2h1.temp02_1 .pop-item-name { text-align: left; } .a4_v2h1.temp02_1 .pop-item-spec, .a4_v2h1.temp02_1 .pop-item-spec span { font-size: 0.9em; } .a4v_common_temp { padding: 1%; } .a4v_common_temp .pop-item-conts.top { width: 30%; height: 100%; float: left; } .a4v_common_temp .pop-item-conts.middle { width: 70%; height: 100%; background-color: #fff; float: left; } .a4v_common_temp .pop-item-conts.middle .pop-item-conts-inner { vertical-align: top; padding: 3% 1% 1% 1%; } .a4v_common_temp .pop-item-conts.bottom { width: 68.6%; height: 55%; position: absolute; bottom: 2%; left: 30.4%; } .a4v_common_temp .pop-item-conts.bottom .pop-item-conts-inner { vertical-align: bottom; } .a4v_common_temp .pop-item-img { width: 16mm; height: 16mm; border-radius: 50%; } .pop-print-page[data-size="A4"] .a4v_common_temp .pop-item-img { width: 40mm; height: 40mm; } .a4v_common_temp .pop-item-busname { width: 50%; float: left; text-align: left; padding: 1% 2% 1% 0; } .a4v_common_temp .pop-item-spec { width: 50%; float: right; text-align: right; padding: 1% 0% 1% 2%; color: #099bd8; } .a4v_common_temp .pop-item-name, .a4v_common_temp .pop-item-name span { font-size: 0.8em; line-height: 0.95em; border-bottom: 0; } .a4v_common_temp .pop-item-name { text-align: left; } .a4v_common_temp .pop-item-price-area, .a4v_common_temp .pop-item-price-area span { font-size: 0.65em; line-height: 0.7em; } .a4v_common_temp .pop-item-sale, .a4v_common_temp .pop-item-sale span { font-size: 1em; line-height: 1.3em; } .a4v_common_temp .pop-item-cancel_line { background-color: #888888; } .pop-print-page[data-size="A4"] .a4v_common_temp .pop-item-cancel_line { height: 2px; margin-top: 0px; } .a4v_common_temp .pop-item-cancel_line:before { display: none; } /* POP A4세로 3등분 a4_v3h1 */ .a4_v3h1 .pop-item-price-area, .a4_v3h1 .pop-item-price-area span { font-size: 0.8em; line-height: 0.82em; } /* ===== temp01 ===== */ .a4_v3h1.temp01 .pop-item-conts.top .pop-item-conts-inner { padding-bottom: 5%; } .a4_v3h1.temp01 .pop-item-add_text1, .a4_v3h1.temp01 .pop-item-add_text1>span { font-size: 1em; line-height: 1.2em; letter-spacing: 5px; } .a4_v3h1.temp01 .pop-item-add_text1 { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .a4_v3h1.temp01 .line2cut { white-space: normal; height: 2.4em; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ===== temp02 ===== */ .a4_v3h1.temp02 { border-left: 5px solid #ee4949; } .a4_v3h1.temp02 .pop-item-conts.top { border-right: 1px dotted #bfbfbf; } .pop-print-page[data-size="A4"] .a4_v3h1.temp02 { border-left: 20px solid #ee4949; padding: 1% 1% 1% 0; } .pop-print-page[data-size="A4"] .a4_v3h1.temp02 .pop-item-conts.top { border-right: 5px dotted #bfbfbf; } .a4_v3h1.temp02 .pop-item-add_text1, .a4_v3h1.temp02 .pop-item-add_text1 span{ font-size: 0.7em; line-height: 0.9em; } .a4_v3h1.temp02 .pop-item-add_text1 { margin-bottom: 5%; text-shadow: 2px 3px #b92828; } .a4_v3h1.temp02 .pop-item-img { width: 20mm; height: 20mm; } .a4_v3h1.temp02 i { font-size: 12px; } .pop-print-page[data-size="A4"] .a4_v3h1.temp02 .pop-item-img { width: 50mm; height: 50mm; } .a4_v3h1.temp02 .pop-item-name { padding-bottom: 2%; border-bottom: 1px dotted #bbb; margin: 0; } /* ===== temp02_1 ===== */ .a4_v3h1.temp02_1 .pop-item-price-area { text-align: right; } /* POP A4세로 4등분 a4_v4h1 */ /* ===== temp01 ===== */ .a4_v4h1.temp01 .pop-item-conts.middle .pop-item-conts-inner { padding: 1%; } .a4_v4h1.temp01 .pop-item-add_text1, .a4_v4h1.temp01 .pop-item-add_text1>span { font-size: 0.8em; padding-bottom: 3%; } .a4_v4h1.temp01 .pop-item-img b { border-radius: 50%; background-color: #fff; } .a4_v4h1.temp01 .pop-item-name { border-bottom: 1px dotted #888; margin: 0; padding: 0% 0 2% 0; } .pop-print-page[data-size="A4"] .a4_v4h1.temp01 .pop-item-name { border-bottom: 3px dotted #888; } .a4_v4h1.temp01 .pop-item-busname, .a4_v4h1.temp01 .pop-item-busname>span, .a4_v4h1.temp01 .pop-item-spec, .a4_v4h1.temp01 .pop-item-spec span{ font-size: 0.6em; line-height: 0.8em; padding: 1% 0 0; } .a4_v4h1.temp01 .pop-item-cancel_line:before { display: none; } .a4_v4h1.temp01 .pop-item-add_text2, .a4_v4h1.temp01 .pop-item-add_text2 span { font-size: 10px; line-height: 12px; } .pop-print-page[data-size="A4"] .a4_v4h1.temp01 .pop-item-add_text2, .pop-print-page[data-size="A4"] .a4_v4h1.temp01 .pop-item-add_text2 span { font-size: 12px; line-height: 16px; } .a4_v4h1.temp01 .pop-item-sale, .a4_v4h1.temp01 .pop-item-sale span { line-height: 1em; } /* ===== temp01_1 ===== */ .flipVertical .pop-item-img i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pop-print-page[data-size="A4"] .a4_v4h1.temp01_1 .pop-item-img i { background-position: 50% 30px; } .flipVertical .pop-item-img b { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* POP A4세로 8등분 a4_v4h2 */ .a4_v4h2 .pop-item-conts.top { width: 100%; height: 15%; } .a4_v4h2 .pop-item-add_text1 { background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/no_img_arrow.png)repeat 0% 50%; background-size: 10%; line-height: 0.1em; } .a4_v4h2 .pop-item-add_text1>span { font-size: 0.3em; background-color: #ee4949; padding: 0px 7%; text-shadow: none; } .a4_v4h2 .pop-item-conts.middle { width: 100%; height: 85%; } .a4_v4h2 .pop-item-conts.middle .pop-item-conts-inner { padding: 1%; } .a4_v4h2 .pop-item-conts.bottom { width: 100%; height: 43%; padding: 3%; left: 0; bottom: 0; } .a4_v4h2 .pop-item-name, .a4_v4h2 .pop-item-name span { font-size: 0.7em; line-height: 1em; } .a4_v4h2.noto .pop-item-name, .a4_v4h2.noto .pop-item-name span { line-height: 1em; } .a4_v4h2 .pop-item-name { border-bottom: 1px solid #555; padding-bottom: 2%; } .a4_v4h2 .pop-item-busname, .a4_v4h2 .pop-item-busname>span, .a4_v4h2 .pop-item-spec, .a4_v4h2 .pop-item-spec>span { font-size: 0.5em; line-height: 0.8em; } .a4_v4h2 .pop-item-sale, .a4_v4h2 .pop-item-sale span { line-height: 1em; } /* POP A4세로 12등분 a4_v6h2 */ .a4_v6h2 { border-right: 1mm solid #ee4949; border-left: 3mm solid #ee4949; padding: 0; } .pop-print-page[data-size="A4"] .a4_v6h2.temp01 { border-left: 5mm solid #ee4949; } .a4_v6h2 .pop-item-conts.middle { width: 100%; height: 45%; background-color: transparent; } .a4_v6h2 .pop-item-conts.bottom { width: 100%; height: 55%; bottom: 0; left: 0; padding: 2% 2% 2% 35%; } .a4_v6h2.noto .pop-item-conts.bottom { padding: 3% 3% 2% 35%; } .a4_v6h2 .pop-item-conts.middle .pop-item-conts-inner { padding: 1%; } .a4_v6h2 .pop-item-name { padding-bottom: 2%; border-bottom: 1px dotted #555; } .a4_v6h2 .pop-item-sale, .a4_v6h2 .pop-item-sale span { line-height: 1em; } .a4_v6h2.noto .pop-item-sale { padding-bottom: 3%; } .a4_v6h2 .pop-item-busname, .a4_v6h2 .pop-item-busname>span, .a4_v6h2 .pop-item-spec, .a4_v6h2 .pop-item-spec>span { font-size: 0.55em; } .a4_v6h2 .pop-item-price-area { text-align: right; } .a4_v6h2 .pop-item-imgbox_area { position: absolute; left: 0; bottom: 0; padding: 1% 5% 3% 5%; } .a4_v6h2 .pop-item-img { width: 8mm; height: 8mm; border-radius: unset; } .pop-print-page[data-size="A4"] .a4_v6h2 .pop-item-img { width: 22mm; height: 22mm; } /* ===== temp02 ===== */ .a4_v6h2.temp02 .pop-item-busname_spec { width: 100%; padding-bottom: 1%; border-bottom: 1px dotted #555; overflow: hidden; } .a4_v6h2.temp02 .pop-item-name { padding-bottom: 0; border-bottom: 0; } .a4_v6h2.temp02 .pop-item-conts.bottom { padding: 2%; } .a4_v6h2.temp02 .pop-item-price-area, .a4_v6h2.temp02 .pop-item-price-area span{ font-size: 0.7em; } .a4_v6h2.temp02 .pop-item-price-area { text-align: left; } /* ===== temp03 ===== */ .a4_v6h2.temp03 { border-right: 0; border-left: 0; } .a4_v6h2.temp03 .pop-item-conts.middle { height: 40%; padding: 0 2%; border-bottom: 1px dashed #bfbfbf; border-left: 1mm solid #ee4949; } .pop-print-page[data-size="A4"] .a4_v6h2.temp03 .pop-item-conts.middle { border-left: 3mm solid #ee4949; } .a4_v6h2.temp03 .pop-item-conts.middle .pop-item-conts-inner { padding: 0; } .a4_v6h2.temp03 .pop-item-conts.bottom { height: 60%; } .a4_v6h2.temp03 .pop-item-busname { padding: 1% 2%; } .a4_v6h2.temp03 .pop-item-spec { padding: 1% 0% 1% 2%; } .a4_v6h2.temp03 .pop-item-name { padding: 2%; border: 0; margin: 0; } /* POP A4세로 27등분 a4_v9h3 */ .a4_v9h3 { border-style: solid; padding: 1%; } .a4_v9h3.border-top { border-top-width: 2px; } .pop-print-page[data-size="A4"] .a4_v9h3.border-top { border-top-width: 1mm; } .a4_v9h3.border-bottom { border-bottom-width: 2px; } .pop-print-page[data-size="A4"] .a4_v9h3.border-bottom { border-bottom-width: 1mm; } .a4_v9h3.border-left { border-left-width: 2px; } .pop-print-page[data-size="A4"] .a4_v9h3.border-left { border-left-width: 1mm; } .a4_v9h3 .pop-item-conts.top { height: 27%; padding-top: 0; border-bottom: 1px dotted #888; } .a4_v9h3 .pop-item-conts.top .pop-item-conts-inner { vertical-align: bottom; padding-bottom: 1%; } .a4_v9h3 .pop-item-conts.middle { height: 55%; } .a4_v9h3 .pop-item-conts.middle>.pop-item-conts-inner { width: 70%; height: 100%; float: left; position: relative; } .a4_v9h3 .pop-item-conts.middle>.pop-item-conts-inner:first-child { width: 30%; } .a4_v9h3 .pop-item-conts.bottom { height: 18%; padding: 0 5px 2px 0; } .a4_v9h3 .pop-item-name, .a4_v9h3 .pop-item-name span { font-size: 0.72em; line-height: 1em; text-align: left; border: 0; } .a4_v9h3 .pop-item-name { padding-top: 1%; margin: 0; } .a4_v9h3 .pop-item-busname_spec, .a4_v9h3 .pop-item-busname_spec span, .a4_v9h3 .pop-item-busname_spec b { font-size: 0.7em; line-height: 1em; } .a4_v9h3 .pop-item-busname_spec { width: 100%; text-align: right; padding: 2% 5% 1% 0; } .a4_v9h3 .pop-item-busname_spec small { font-size: 0.52em; line-height: unset; color: #555; } .a4_v9h3 .pop-item-busname_spec b { color: #24b8ea; font-weight: bold; } .a4_v9h3 .pop-item-img, .pop-print-page[data-size="A4"] .a4_v9h3 .pop-item-img{ width: 100%; height: 100%; padding: 5%; } .pop-print-page[data-size="A4"] .a4_v9h3 .pop-item-img>i { background-position: 50% 0; } .a4_v9h3 .pop-item-img>img { width: auto; height: 100%; } .a4_v9h3 .pop-item-sale, .a4_v9h3 .pop-item-sale span { font-size: 0.82em; line-height: 1em; } .a4_v9h3 .pop-item-sale { padding-right: 4px; } .pop-print-page[data-size="A4"] .a4_v9h3 .pop-item-sale { position: absolute; right: 6px; bottom: 10px; padding-right: 0; } .a4_v9h3 .pop-item-barcode { width: 55%; height: 5px; margin-top: 2px; float: right; overflow: hidden; } .pop-print-page[data-size="A4"] .a4_v9h3 .pop-item-barcode { width: 100%; height: 100%; text-align: right; margin-top: 0; float: none; float: unset; } .a4_v9h3 .pop-item-barcode>img { margin-top: -14px; } /* POP A4가로 */ /* POP A4세로 공통 a4h_common_temp */ .a4h_common_temp { width: 100%; height: 100%; overflow: hidden; text-align: center; } .a4h_common_temp .pop-item-box.top { width: 100%; height: 15%; } .a4h_common_temp .pop-item-box.middle { width: 100%; height: 75%; overflow: hidden; } .a4h_common_temp .pop-item-box.left { width: 30%; height: 100%; float: left; } .a4h_common_temp .pop-item-box.right { width: 70%; height: 100%; padding: 2%; float: left; } .a4h_common_temp .pop-item-box.bottom { width: 100%; height: 10%; } /* POP A4가로 1등분 a4_v1h1 */ .a4h_v1h1 .pop-item-busname_spec { text-align: left; padding-bottom: 2%; border-bottom: 1px solid #bbb; } .a4h_v1h1 .pop-canvas small { font-size: 0.4em; line-height: unset; } .a4h_v1h1 .pop-item-busname_spec b { font-size: 0.55em; font-weight: bold; color: #099bd8; } .a4h_v1h1.pop_Brush .pop-item-busname_spec b { font-weight: normal; } .a4h_v1h1 .pop-item-name { text-align: left; padding-bottom: 5%; margin: 0; } .a4h_v1h1 .pop-item-name span { border-bottom: 0; } .a4h_v1h1 .pop-item-price-area, .a4h_v1h1 .pop-item-price-area span { font-size: 0.85em; line-height: 1em; } .a4h_v1h1 .pop-item-price-area { text-align: left; } .a4h_v1h1 .pop-item-sale, .a4h_v1h1 .pop-item-sale span { line-height: 1em; } .a4h_v1h1 .pop-item-sale { padding-bottom: 3%; } .a4h_v1h1 .pop-item-add_text2, .a4h_v1h1 .pop-item-add_text2 span { font-size: 0.55em; } .a4h_v1h1.pop_a4h_type05.bg1, .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-box.top { background-color: #ee4949; padding: 1%; } .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-box.top { height: 18%; padding-bottom: 2%; } .pop-template-type .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-box.middle { height: 74%; } .pop-template-type .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-add_text2 { line-height: 0.8em; } .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-box.bottom { height: 7%; } .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-add_text1>span { padding: 0 10%; position: relative; } .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-add_text1>span::before, .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-add_text1>span::after { content: ""; display: block; width: 10px; height: 10px; background: #75100e; border-radius: 50%; border: 2px solid #b92828; position: absolute; top: 50%; margin-top: -5px; left: 0; } .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-add_text1>span::after { right: 0; left: auto; } .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-box { background-color: #fff; } .a4h_v1h1.pop_a4h_type05.bg2 { background-image: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4h_v1h1_temp01.png); background-size: cover; border: 15px solid #004a80; } .a4h_v1h1.pop_a4h_type05.bg2 .pop-item-box.middle { height: 67%; } .a4h_v1h1.pop_a4h_type05.bg2 .pop-item-add_text1>span { background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4h_v1h1_temp01-1.png)no-repeat 50% 50%; background-size: contain; padding: 2% 16% 4% 16%; } .a4h_v1h1.pop_a4h_type06 .pop-item-name { padding-bottom: 3%; } .a4h_v1h1.pop_a4h_type06 .pop-item-busname_spec { border-bottom: 5px dotted #c0ccdc; } .a4h_v1h1.pop_a4h_type06 .pop-item-busname_spec small { display: inline-block; font-size: 0.45em; line-height: 0.45em; color: #888; padding-bottom: 5%; } .a4h_v1h1.pop_a4h_type06.bg1 { background-image: url('http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4h_v1h1_temp02.png'); background-size: cover; } .a4h_v1h1.pop_a4h_type06.bg1 .pop-item-box.middle { height: 70%; } .a4h_v1h1.pop_a4h_type06.bg1 .pop-item-add_text1>span { font-family: 'WPOPBrush', 'POP_Brush', "gulim", malgun gothic, sans-serif; font-weight: normal; letter-spacing: 1px; background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4h_v1h1_temp02-1.png)no-repeat 50% 50%; background-size: contain; padding: 1% 15% 2% 11%; } .a4h_v1h1.pop_a4h_type06.bg1 .pop-item-price-area { text-align: right; } .a4h_v1h1.pop_a4h_type07 .pop-item-add_text2 { text-align: center; padding: 2% 1% 0 1%; font-size: 0.85em; } .a4h_v1h1.pop_a4h_type07 .pop-item-busname_spec { border-bottom: 0; padding-bottom: 1%; } .a4h_v1h1.pop_a4h_type07 .pop-item-busname_spec small { font-size: 0.45em; color: #888; } .a4h_v1h1.pop_a4h_type07 .pop-item-sale span { border-bottom: 4px ridge #ff5b5b; border-style: ridge; } .a4h_v1h1.pop_a4h_type07.bg1 { border: 15px solid #ee4949; } .a4h_v1h1.pop_a4h_type07.bg1 .pop-item-box.top { background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4_v1h1_temp01_1.png)no-repeat 50% -160px; background-size: cover; } .a4h_v1h1.pop_a4h_type07.bg1 .pop-item-add_text2 span { padding: 0% 1% 0.5% 1%; border-bottom: 6px double #ee4949; color: #ee4949; font-size: 0.8em; } .a4h_v1h1.pop_a4h_type08 { background: #ee4949; padding: 2%; } .a4h_v1h1.pop_a4h_type08 .pop-item-box.top, .a4h_v1h1.pop_a4h_type08 .pop-item-box.middle { background: #fff; } .a4h_v1h1.pop_a4h_type08 .pop-item-add_text1>span { letter-spacing: 10px; background: #ee4949; padding: 1% 5% 2% 5%; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; margin-top: -16px; } .a4h_v1h1.pop_a4h_type08 .pop-item-add_text2 { text-align: center; color: #555; padding-top: 1%; } .a4h_v1h1.pop_a4h_type08 .pop-item-name { padding-bottom: 1%; border-bottom: 2px dotted #bbb; margin-bottom: 1%; } .a4h_v1h1.pop_a4h_type08 .pop-item-busname_spec { font-size: 1em; text-align: right; border-bottom: 0; } .a4h_v1h1.pop_a4h_type08 .pop-item-busname_spec small { display: inline-block; padding: 10% 0; } .a4h_v1h1.pop_a4h_type08 .pop-item-sale { padding-bottom: 0; } .pop-print-page[data-size="A4"][data-layout="landscape"] .a4h_v1h1 .pop-item-img { width: 80mm; height: 80mm; } .pop-print-page[data-size="A4"] .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-add_text1>span::before, .pop-print-page[data-size="A4"] .a4h_v1h1.pop_a4h_type05.bg1 .pop-item-add_text1>span::after { width: 20px; height: 20px; border: 3px solid #b92828; margin-top: -10px; } .pop-print-page[data-size="A4"] .a4h_v1h1.pop_a4h_type07 .pop-item-sale span{ border-bottom: 8px ridge #ff5b5b} .pop-print-page[data-size="A4"] .a4h_v1h1.pop_a4h_type08 .pop-item-add_text1>span{ border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; } .pop-print-page[data-size="A4"] .a4h_v1h1.pop_a4h_type08 .pop-item-name{ border-bottom: 5px dotted #bbb; } #popTemplateView .a4h_v1h1.pop_a4h_type05.bg2 { border: 5px solid #004a80; } #popTemplateView .a4h_v1h1.pop_a4h_type05.bg2 .pop-item-add_text1>span { padding: 1% 15% 2% 15%; } #popTemplateView .a4h_v1h1.pop_a4h_type05.bg2 .pop-item-add_text2 { margin-top: -15px; } #popTemplateView .a4h_v1h1.pop_a4h_type06 .pop-item-busname_spec { border-bottom: 2px dotted #c0ccdc; } #popTemplateView .a4h_v1h1.pop_a4h_type07.bg1 { border: 5px solid #ee4949; } #popTemplateView .a4h_v1h1.pop_a4h_type07.bg1 .pop-item-box.top { background-position: 50% -56px; } #popTemplateView .a4h_v1h1.pop_a4h_type08 .pop-item-add_text1>span { letter-spacing: 5px; } /* POP A4가로 2등분 a4_v1h2 */ .v1h2[data-layout="landscape"] * { font-size: 21px; } .v1h2[data-size="A4"] * { font-size: 64px; } .a4h_v1h2 { padding: 1%; } .a4h_v1h2.bg1 { background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4_v1h1_temp01_1.png)no-repeat 50% -12px; background-size: cover; } .a4h_v1h2.bg2 { background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4h_v1h2_temp03.png)no-repeat 50% 50%; background-size: cover; } .a4h_v1h2.bg3 { background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4h_v1h2_temp04.png)no-repeat 50% 50%; background-size: cover; } .a4h_v1h2 .pop-item-box.bottom { height: 6%; } .a4h_v1h2 .pop-item-add_text2 { font-size: 0.65em; color: #666; text-align: center; } .a4h_v1h2 .pop-item-busname_spec { padding-bottom: 5%; } .a4h_v1h2 .pop-item-busname_spec small { font-size: 0.4em; line-height: 1em; color: #666; } .a4h_v1h2 .pop-item-busname_spec b { font-size: 0.45em; color: #099bd8; } .a4h_v1h2 .pop-item-price-area { font-size: 0.7em; } .a4h_v1h2 .pop-item-cancel_line { height: 3px; margin-top: 0px; } .v1h2[data-size="A4"] .a4h_v1h2 .pop-item-cancel_line:before { width: 20px; height: 3px; top: 8px; right: -4px; } .a4h_v1h2 .pop-item-sale { text-align: center; } .a4h_v1h2 .pop-item-img { width: 15mm; height: 15mm; } .pop-print-page[data-size="A4"] .a4h_v1h2 .pop-item-img { width: 60mm; height: 60mm; margin: 5% auto; } .a4h_v1h2.pop_a4h_type02 .pop-item-busname_spec { padding-bottom: 0; } .a4h_v1h2.pop_a4h_type02 .pop-item-add_text1, .a4h_v1h2.pop_a4h_type03 .pop-item-add_text1 { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .a4h_v1h2.pop_a4h_type03 .pop-item-add_text1 span { font-family: 'WPOPBrush', 'POP_Brush', "gulim", malgun gothic, sans-serif; font-weight: normal; letter-spacing: 1px; } .a4h_v1h2.pop_a4h_type03 .pop-item-busname { font-size: 0.5em; } .a4h_v1h2.pop_a4h_type03 .pop-item-spec { font-size: 0.8em; color: #099bd8; padding-bottom: 3%; } .a4h_v1h2.pop_a4h_type04 .pop-item-box.top { height: 17%; } .a4h_v1h2.pop_a4h_type04 .pop-item-box.middle { height: 59%; } .a4h_v1h2.pop_a4h_type04 .pop-item-box.bottom { height: 20%; } .a4h_v1h2.pop_a4h_type04 .pop-item-add_text2 { font-size: 1em; padding-top: 3%; } #popTemplateView .a4h_v1h2.bg1 { background-position: 50% 0%; } /* POP A4가로 4등분 a4_v2h2 */ .v2h2[data-layout="landscape"] * { font-size: 19px; } .v2h2[data-size="A4"] * { font-size: 45px; } .a4h_v1h1.x4 .pop-item-img { width: 10mm; height: 10mm; } .pop-print-page[data-size="A4"] .a4h_v1h1.x4 .pop-item-img { width: 40mm; height: 40mm; } .a4h_v1h1.x4 .pop-item-price { font-size: 0.7em; } .a4h_v1h1.x4 .pop-item-sale, .a4h_v1h1.x4 .pop-item-sale span { font-size: 1.2em; } .a4h_v1h1.x4 .pop-item-add_text2, .a4h_v1h1.x4 .pop-item-add_text2 span { font-size: 0.6em; } .a4h_v1h1.x4 .pop-item-cancel_line { height: 3px; margin-top: 0px; } .v2h2[data-size="A4"] .a4h_v1h1.x4 .pop-item-cancel_line:before { width: 20px; height: 3px; top: 8px; right: -4px; } .a4h_v1h1.x4.pop_a4h_type05.bg2 { border: 7px solid #004a80; } .a4h_v1h1.x4.pop_a4h_type05.bg2 .pop-item-price-area { text-align: right; } .a4h_v1h1.x4.pop_a4h_type05.bg2 .pop-item-busname_spec small { font-size: 0.45em; line-height: 0.8em; } .a4h_v1h1.x4.pop_a4h_type07.bg1 { border: 7px solid #ee4949; } .a4h_v1h1.x4.pop_a4h_type07.bg1 .pop-item-box.top { background-position: 50% -80px; } .a4h_v1h1.x4.pop_a4h_type07 .pop-item-box.middle { height: 70%; } .a4h_v1h1.x4.pop_a4h_type07 .pop-item-add_text2, .a4h_v1h1.x4.pop_a4h_type07 .pop-item-add_text2 span { font-size: 0.85em; } .a4h_v1h1.x4.pop_a4h_type08 .pop-item-box.middle { height: 71%; } .a4h_v1h1.x4.pop_a4h_type08 .pop-item-add_text1, .a4h_v1h1.x4.pop_a4h_type08 .pop-item-add_text1>span { font-size: 1.1em; line-height: 1.5em; padding-bottom: 0; } #popTemplateView .a4h_v1h1.x4 .pop-item-busname_spec { line-height: 10px; } #popTemplateView .a4h_v1h1.x4 .pop-item-name { font-size: 0.8em; padding-bottom: 0; } #popTemplateView .a4h_v1h1.x4 .pop-item-sale { font-size: 0.8em; } #popTemplateView .a4h_v1h1.x4 .pop-item-cancel_line { height: 2px; } #popTemplateView .a4h_v1h1.x4 .pop-item-cancel_line:before { width: 15px; height: 2px; top: 6px; right: -3px; } #popTemplateView .a4h_v1h1.x4.pop_a4h_type05.bg2 .pop-item-add_text2 { margin-top: 0; } #popTemplateView .a4h_v1h1.x4.pop_a4h_type06.bg1 .pop-item-add_text2 { background: #fff; padding-bottom: 1px; } #popTemplateView .a4h_v1h1.x4.pop_a4h_type07.bg1 .pop-item-box.top { background-position: 50% -27px; } #popTemplateView .a4h_v1h1.x4.pop_a4h_type07 .pop-item-add_text2 { font-size: 0.7em; } #popTemplateView .a4h_v1h1.x4.pop_a4h_type08 .pop-item-add_text1 { font-size: 0.9em; line-height: 1em; } /* POP A4가로 6등분 a4_v2h3 */ .v2h3[data-layout="landscape"] * { font-size: 12px; } .v2h3[data-size="A4"] * { font-size: 36px; } .a4h_v2h3 { padding: 1%; } .a4h_v2h3 .pop-item-img { width: 8mm; height: 8mm; } .a4h_v2h3 .pop-item-busname_spec { padding-bottom: 5%; } .a4h_v2h3 .pop-item-busname_spec small { font-size: 0.6em; line-height: 1em; color: #555; } .a4h_v2h3 .pop-item-busname_spec b { font-size: 0.6em; color: #099bd8; } .a4h_v2h3 .pop-item-busname, .a4h_v2h3 .pop-item-busname span { font-size: 0.8em; } .a4h_v2h3 .pop-item-spec { color: #099bd8; } .a4h_v2h3 .pop-item-box.bottom { height: 5%; } .a4h_v2h3 .pop-item-add_text2, .a4h_v2h3 .pop-item-add_text2 span { font-size: 14px; line-height: 1em; } .a4h_v2h3.pop_a4h_type01 .pop-item-add_text1, .a4h_v2h3.pop_a4h_type03 .pop-item-add_text1{ text-align: left; padding-left: 5%; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .a4h_v2h3 .pop-item-box.top .pop-item-box_inner { vertical-align: top; } .a4h_v2h3.pop_a4h_type02 .pop-item-busname_spec { padding-bottom: 0; } .a4h_v2h3.pop_a4h_type03 .pop-item-box.top { height: 17%; } .a4h_v2h3.pop_a4h_type03 .pop-item-box.bottom, .a4h_v2h3.pop_a4h_type04 .pop-item-box.top{ display: none; } .a4h_v2h3.pop_a4h_type03 .pop-item-sale, .a4h_v2h3.pop_a4h_type04 .pop-item-sale { text-align: center; } .a4h_v2h3.bg1 { background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4h_v1h2_temp03.png)no-repeat 50% 15%; background-size: cover; border: 3px solid #d93d3d; } .a4h_v2h3.bg2 { background-image: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4h_v1h1_temp02.png); background-size: cover; } .a4h_v2h3.bg2 .pop-item-add_text1>span { font-family: 'WPOPBrush', 'POP_Brush', "gulim", malgun gothic, sans-serif; font-weight: normal; letter-spacing: 1px; background: url(http://manager.shopnshop.net/MallImage/POP_Image/POP/popSample/a4h_v1h1_temp02-1.png)no-repeat 50% 50%; background-size: contain; padding: 1% 15% 2% 11%; } .a4h_v2h3.bg3 .pop-item-name { background: #fee900; border-bottom: 2px solid #ffc21d; border-right: 2px solid #ffc21d; } .a4h_v2h3.bg3 .pop-item-name span { border: 0; } .pop-print-page[data-size="A4"] .a4h_v2h3 .pop-item-img { width: 30mm; height: 30mm; } .pop-print-page[data-size="A4"] .a4h_v2h3 .pop-item-cancel_line { height: 2px; margin-top: 0px; } .pop-print-page[data-size="A4"] .a4h_v2h3 .pop-item-cancel_line:before { width: 20px; height: 2px; top: 9px; right: -4px; } .pop-print-page[data-size="A4"] .a4h_v2h3.pop_a4h_type02 .pop-item-box.top{ height: 19%; } .pop-print-page[data-size="A4"] .a4h_v2h3.pop_a4h_type04 .pop-item-img { width: 40mm; height: 40mm; } #popTemplateView .a4h_v2h3 .pop-item-add_text2 span { font-size: 10px; } /* 인쇄 설정 */ @media print { @page { margin: 0; padding: 0; } .fix-printbtn, .fix-closebtn, .page-break-margin{ display: none ! important; } html, body, body.cke_editable, .pop-template-box{ border: 0 ! important; margin: 0 ! important; padding: 0 ! important; } .cke_editable{ font-size: 0; line-height: 0; } .pop-print-page[data-size="A4"]{ page: a4sheet; border: 0 ! important; margin: 0 ! important; } .v1h1 .pop-canvas, .v2h1 .pop-canvas{ border: 0 ! important; } .pop-item-img{ border: 0; } } /*=============================== (구)이벤트등록 및 POP인쇄 E ===============================*/ /*=============================== (신규)POP 미니샵 글 등록 ===============================*/ /* pop goods miniTemp */ .disp--block{ display:block; } .goods__textbox{ padding:.2em; overflow: hidden; } .goods__name{ margin-bottom:.1em; padding: 0 .2em; font-size: 1.05em; } .goods__size{ margin: .2em 0; padding:0 .2em; font-size:.85em; color: var(--color-default); } .goods__barcode { font-size:.8em; color: var(--color-default); font-weight: lighter; padding: 0 0.2em; } .goods__price{ padding: .2em; word-break: keep-all; word-wrap: break-word; } .price__cost{ font-size:.7em; line-height: 1; display: block; text-decoration: line-through; color: var(--color-default);} .price__sale{ font-size: 1.2em; font-weight: bold; letter-spacing: -.4px; } .price__sale .unit{ font-size:70%; font-weight: bold; } .popgoods--minitemp, .popgoods--minitemp *{ box-sizing:border-box; } .popgoods--minitemp p, .popgoods--minitemp ul, .popgoods--minitemp li{ margin:0; padding:0; list-style:none; } .minitemp__item{ font-size:16px; padding:.4em; } .minitemp__item .goods__img{ font-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0.4em; color: #888; word-break: keep-all; word-wrap: break-word; } .minitemp__item .goods__img >img{ width:100%; height:100%; object-fit: cover; } .minitemp__item .price__sale{ font-size:12px; color:#888; text-decoration: line-through; } .minitemp__item .price__saleSell{ color: #ef2b2b; font-weight:bold; font-size: 1.3em; letter-spacing: -.4px; } .minitemp1 .minitemp__item .inner{ padding:.2em .4em; border:1px solid #ddd; box-shadow: 2px 2px #f7f7f7; display: flex; flex-direction: row; align-items: center; } .minitemp1 .goods__img{ align-self: baseline; margin-top: 0.4em; width: 70px; height: 70px; } .minitemp1 .goods__textbox{ flex:1; } .minitemp1 .goods__price{text-align: right;} .minitemp2 .minitemp__item .inner{ padding:.2em .4em; border:1px solid #ddd; box-shadow: 2px 2px #f7f7f7; display: flex; flex-direction: row; align-items: center; } .minitemp2 .goods__img{ align-self: baseline; margin-top: 0.4em; width: 70px; height: 70px; } .minitemp2 .goods__textbox{ flex:1; } .minitemp3 .minitemp__item .inner{ padding:.2em .4em; border:1px solid #ddd; box-shadow: 2px 2px #f7f7f7; display: flex; flex-direction: row; align-items: center; } .minitemp3 .goods__img{ align-self: baseline; margin-top: 0.4em; width: 70px; height: 70px; padding:0; border-radius:50%; overflow:hidden; } .minitemp3 .goods__textbox{ flex:1; } .minitemp3 .goods__price{ text-align:right; } .minitemp4 { display: flex; flex-wrap: wrap; } .minitemp4 .minitemp__item{ flex: 0 0 50%; padding:0; overflow:hidden; } .minitemp4 .minitemp__item .inner{ height:100%; border: 1px solid #ddd; border-top:0; padding:.4em; } .minitemp4 .minitemp__item:nth-child(1) .inner, .minitemp4 .minitemp__item:nth-child(2) .inner{ border-top:1px solid #ddd; } .minitemp4 .minitemp__item:nth-child(2n) .inner{ border-left:0; } .minitemp4 .goods__img{ padding-bottom: 50%; display: flex; } .minitemp5 { display: flex; flex-wrap: wrap; } .minitemp5 .minitemp__item{ flex: 0 0 50%; padding:0; overflow:hidden; } .minitemp5 .minitemp__item .inner{ height:100%; border: 1px solid #ddd; border-top:0; padding:.4em; } .minitemp5 .minitemp__item:nth-child(1) .inner, .minitemp5 .minitemp__item:nth-child(2) .inner{ border-top:1px solid #ddd; } .minitemp5 .minitemp__item:nth-child(2n) .inner{ border-left:0; } .minitemp5 .goods__img{ padding-bottom: 50%; display: flex; } .minitemp5 .goods__price{ text-align:right; } .pop--miniboard{ width:100%; } .page--miniboard{ width:100%; border:1px solid #EEEEEE; margin-bottom:1em; } .item--miniboard{ width:100%; border:1px solid #EEEEEE; } .item--miniboard svg{ display: block; width: 100%; height: 100%; }