:root {
   --vh: 100%;
}
html {
  scroll-behavior: smooth;
 } 
body {
	width:100%;
	background-color: #f9f9f9;
}
#loader {
    position: fixed;
    left: 50%;
    top: 30%;
	margin-left:-90px;
	display:none;
    z-index: 9999;
    width: 180px;
    height: 140px;
	padding:10px;
    margin-right:-90px ;
	border-radius: 25px;
	border:1px solid #999;
	background-color:rgba(255,255,255,1);
}
#loader-rodding {
	position: relative;
    margin:auto;
    z-index: 1;
    width: 50px;
    height: 50px;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
.sevice-pack-msgbox {
    display: block;
    padding-bottom: 0;
    position: absolute;
    background-color: #25579C;
    -webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.5);
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.5);
    z-index: 4 !important;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.sevice-pack-msgbox-content {
    font-size: 13px;
    line-height: 1.44;
    letter-spacing: 0.1px;
    text-align: left;
    color: #ffffff;    
    margin: 12px 12px;
}
.sevice-pack-posi-msg01 {
    top:-80px;
    left: 0;
	width:180px;
}
.msgbox-arrow01:after {
	content: '';
	position: absolute;
    bottom: -16px;
    left: 40px;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color:  #25579C transparent transparent  transparent;
    clear: both;
}
#Canvas-header {
	position: relative;
	width:100%;
	padding:0 8px;
	height:50px;
	display: flex;
	flex-wrap: nowrap;
	background-color:#f9f9f9;
	border-bottom:1px solid #ddd;
}
.GuideLine-itext  {
	margin:auto;
	width:340px;
	text-align:center;
	font-size:14px;
	font-weight:700;
}
.GuideLine-itext-arrow {
	position: absolute;
	width:18px;
	left:0;
	right:0;
	margin:auto;
	bottom:-13px;
	z-index:2;
}
.tapme_logo {
    position: absolute;
    width: 68px;
    height: 20px;
    margin-top: 14px;
    display: block;
    background-image: url(../../img-file/top/tapme-logo-b.svg?);
    background-size: cover;
    background-repeat: no-repeat;
}
.flip-btn-show {
    position: absolute;
	left:0;
	right:0;
	bottom:190px;
	margin:auto;
	text-align:center;
	width:100px;
	z-index:2;
}
.Canvas-container{
	position:relative;
	margin:auto;
	width: 100%; 
	height: calc(100vh - 0px);  
	background-color: #ddd;
	overflow: hidden; 
}
.Canvas-container-black{
	position:relative;
	margin:auto;
	width: 100%; 
	min-height: 800px;  
	/*min-height: calc(100vh + 10px);  */
	background-color: #8c8c8c;
	overflow: hidden; 
}
.container-out-box {
    position: relative;
	margin: auto;
	margin-top:0;
	width:100%;
	max-width: 800px; /*856 *0.64 =548  540*0.64 = 345 //426 270*/
	height:800px;
	z-index:0;
}
.container-line{
	margin: auto;
	width:100%;
	max-width: 800px; /*856 *0.64 =548  540*0.64 = 345 //426 270*/
	z-index:0;
	
}
.canvas-wrapper {
	background-color:#ffffff;
}
#img_add {
	width:100%;
	height:200px;
	overflow-y:auto;
}
.row_img {
	position: relative;
	float:left;
	width:95px;
	height:105px;
}
.web-bg-container {
	position: relative;
	float:left;
	width:90px;
	height:80px;
}
.web-bg-container img {
	width:100%;
	height:100%;
	object-fit: cover;
}
.delimg_icon {
    position: absolute;
	left:0;
	right:0;
    bottom: 3px;
	margin:auto;    
	font-size:16px;
	text-align:center;
	color:red;
	line-height:18px;
	width:18px;
	height:18px;
	border:1px solid red;
	background-color: #f9f9f9;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.tab-upload-btn {
    display: block;
    text-align: center;
    padding: 0 15px;
    border: 1px solid #06AAE7;
	background-color: #06AAE7;
    cursor: pointer;
    color: #464646;
    border-radius: 0.2em;
    vertical-align: middle;
}
.upload_icon {
	margin:8px auto;
	text-align:center;
	font-size: 16px;
	color:#fff;
}
.menu-reload-btn {
	position: absolute;
    width: 40px;
    padding:10px 0;
	margin-top:-50px;
    text-align: center;
    float: left;
	z-index:999;
}



.P-display-card {
	position: absolute;
	left:0;
	right:0;
	bottom:14%;
	margin:auto;
	width:53.5%;
	height:33.7%;
	left:-10%;
	overflow: hidden; 
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	transform: rotate( 0deg );
	background-color: #FFFFFF;
}

.Preview-image {
	position: absolute;
	top:25%;
	left:0;
	right:0;
	margin:auto;	
	width:90%;
	max-width:540px;
	overflow: hidden; 
	background-color: #FFFFFF;
}
.Preview-image2 {
	position: absolute;
	top:25%;
	left:0;
	right:0;
	margin:auto;	
	width:90%;
	max-width:540px;
	overflow: hidden; 
	background-color: #FFFFFF;
}
.Preview-Card-item {
	position: relative;
	width:80%;
	margin:30px auto;
	max-width:540px;
	overflow: hidden; 
	background-color: #f9f9f9;
	box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
.Preview-Card-item2 {
	position: relative;
	width:80%;
	margin:30px auto;
	max-width:540px;
	overflow: hidden; 
	background-color: #f9f9f9;
	box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
.P-display-card4-01 {
	position: absolute;
	left:10%;
	bottom:44%;
	margin:auto;
	width:42.8%;
	height:26.9%;
	overflow: hidden; 
	transform: rotate( -20deg );
	background-color: #FFFFFF;
	z-index:2;
}
.P-display-card4-02 {
	position: absolute;
	left:30%;
	bottom:34%;
	margin:auto;
	width:42.8%;
	height:26.9%;
	overflow: hidden; 
	transform: rotate( 0 );
	z-index:1;
}
.P-display-card5 {
	position: absolute;
	left:28.36%;
	top:27.95%;
	width:46.93%;
	height:29.69%;
	overflow: hidden; 
	transform: rotate( 0 );
	z-index:1;
}
.P-display-card6 {
	position: absolute;
	left:45.0%;
	top:39.28%;
	width:36.42%;
	height:23.16%;
	overflow: hidden; 
	transform: rotate( 0 );
	z-index:1;
}
.P-display-card7 {
	position: absolute;
	left:45.0%;
	top:37.48%;
	width:36.42%;
	height:23.06%;
	overflow: hidden; 
	transform: rotate( 0 );
	z-index:1;
}
.P-display-card7-01 {
	position: absolute;
	left:13.0%;
	top:65%;
	width:36.42%;
	height:23.06%;
	overflow: hidden; 
	transform: rotate( 0 );
	z-index:1;
}
.P-display-option-01 {
	position: absolute;
	left:5.28%;
	top:23.18%;
	width:25.04%;
	height:54.61%;
	overflow: hidden; 
	transform: rotate( 0 );
	z-index:1;
}
.P-display-option-021 {
	position: absolute;
	left:5.28%;
	top:23.18%;
	width:25.04%;
	height:54.61%;
	overflow: hidden; 
	transform: rotate( 0 );
	z-index:1;
}
.P-display-option-022 {
	position: absolute;
	left:43.53%;
	top:21.8%;
	width:16.77%;
	height:36.34%;
	overflow: hidden; 
	transform: rotate( 0 );
	z-index:1;
}
.Preview-img-radius {
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
}
.Preview-img-radius02 {
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
.Preview-img-radius03 {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.col-md-img-display {
    background-image: url(../canvas-img/card-preview-bg02.jpg);
    background-size: 100%;
    background-repeat: repeat;
}
.card-shadow {
	  box-shadow: 0 12px 12px -8px black;
}



.Preview-Card-bgtext {
	position: absolute;
	left:0;
	right:0;
	top:32px;
	margin:auto;
	text-align:center;
	font-size:20px;
	color:#000;
	font-weight:600;
}
.sample_image {
    max-height: 400px;

}
.modal-footer {
    position: relative;
    padding: 40px 15px;
}
.preview-box {
    overflow: hidden;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
}
.menu-btn-container {
	position: absolute;	
	right:0;
	top:100px;
	width:100%;
	max-width:201px;
	padding-bottom:8px;
	border:1px solid #ddd;
	background-color: #f9f9f9;
	-webkit-border-radius: 12px ;
	-moz-border-radius: 12px;
	border-radius: 12px;
	box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
.tap-show-box {
	display:none;
}
.menu-btn-boxline {
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	padding-top:8px;
}
.menu-btn-boxline2 {
    position: relative;
	padding-top:8px;
}
.menu-btn {
	position: relative;
	width:50%;
	padding:10px 0;
	text-align:center;
	float:left;	
}
.menu-btn-Add {
	position: relative;
	width:25%;
	padding:10px 0;
	text-align:center;
	float:left;	
}
.menu_icon {
	margin:0 auto 8px auto;;
	width:30px;
	cursor: pointer;
}
.menu-btn p {
	font-size:12px;
	text-align:center;
	padding:0;
	margin:0;
	line-height:1;
}
.Controls-close {
    position: absolute;
    top: 5px;
	left: 5px;
	width:30px;
    height: 30px;
	font-size: 26px;
	line-height:26px;
	text-align:center;
	color:#333;
}
.menu-box {
    position:absolute;
    top: 100px;
	/*right: -430px; */
	right:0;
    width: 402px;
    height: 462px;
	transform: translateX(500px)!important;
	border:1px solid #ddd;
	background-color: #f9f9f9;
	-webkit-border-radius: 12px 0 0 12px;
	-moz-border-radius: 12px 0 0 12px;
	border-radius: 12px 0 0 12px;
	box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	z-index:10;
}
.menu-font-display {display:none;}
.menu-img-display {display:none;}
.menu-box-show {
 /* right: 0; */
transform: translateX(0)!important;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.textControls-inbox {
	position:relative;
	padding:30px;
}

.bg-color-container {
	padding: 4px;
}
.bg-color-box {
	position: relative;
    width: 48px;
    height: 48px;
    overflow: hidden;
    display: inline-block;
	padding:5px;
    margin: 2px;
    white-space: nowrap;
    vertical-align: middle;
	border:1px solid #ddd;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.bg-color-boxbg {background-color:#d1d1d1;}
.bg-color-gry {background-color:#BCBCBC;}
.bg-color-001 {background-color:#FFFFFF;}
.bg-color-002 {background-color:#000000;}

.bg-color-01 {background-color:#FFFFFF;}
.bg-color-02 {background-color:#fff5f0;}
.bg-color-03 {background-color:#ddf0f5;}
.bg-color-04 {background-color:#f1666b;}
.bg-color-05 {background-color:#50c2bd;}
.bg-color-06 {background-color:#f2b579;}
.bg-color-07 {background-color:#8a79b8;}
.bg-color-08 {background-color:#404041;}
.bg-color-09 {background-color:#000000;}
.text-line-box {
	margin-bottom: 16px;
}
.selector-font-style {
	margin-bottom: 16px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.selector-font-container {
	margin-bottom: 16px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.selector-fontbox {
    position: relative;
    height: 51px;
    border-radius: 8px;
    overflow: hidden;
    display: inline-block;
    width:100%;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #f4f4f4;
}
.selector-fontbox p {
    margin: 16px 0 0 0;
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
}
.selector-font-blod {
    position: relative;
    height: 51px;
	width:51px;
    border-radius: 8px;
	margin:0 8px 8px 0;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #f4f4f4;
}

.selector-font-blod p {
    margin: 8px 0 0 0;
    font-size: 20px;
    color: #000;
    font-weight: 400;
}
.selector-font-blod p span {
	font-size: 24px;
    font-weight: 800;
}
.selector-font-templates {
    position: relative;
    height: 38px;
    border-radius: 16px;
    overflow: hidden;
    display: inline-block;
	margin:4px 4px 0 0;
    padding: 0 8px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #dddddd;
    line-height:40px;
    font-size: 13px;
    color: #111;
    font-weight: 400;
}

.selector-font-edit00 {background-color: #efefef; }
.selector-font-edit01 {background-color: #167E95; }
.selector-font-edit02 {background-color: #06AAE7; }

.selector-font-style01 {font-family:'LINESeedKR-Rg' !important; }
.selector-font-style02  {font-family:'Noto Sans KR' !important; }
.selector-font-style03  {font-family:'GyeonggiTitleM' !important; }
.selector-font-style04  {font-family:'NanumBarunGothic' !important;}
.selector-font-style05  {font-family:'wooriDaum' !important;}

.selector-font-style06  {font-family:'Roboto' !important; }
.selector-font-style07  {font-family:'Geologica' !important; }
.selector-font-style08  {font-family:'Poppins'!important; }
.selector-font-style09  {font-family:'Anton' !important; }
.selector-font-style10  {font-family:'Abril Fatface' !important; }
.selector-font-style11  {font-family:'Yeseva One' !important; }
.selector-font-style12  {font-family:'Water Brush' !important; }
.selector-font-style13  {font-family:'Contrail One' !important; }
.selector-font-templates.active {
    color: red;
    box-shadow: 0 0 0 2px #10A1FF;
}
.color-picker{
    position: relative;
    height: 30px;
	width:30px;
	margin:auto;
}

.modal.fade .modal-lg-preview {
  transform: translate3d(0, 100vh, 0);
}

.modal.in .modal-lg-preview {
  transform: translate3d(0, 0, 0);
}
.modal-body2-title {
   position: fixed;
   top:0;
   z-index:9;
   width:100%;
   margin: 0 1px;
   height:30px;
   line-height:30px;
   text-align:center;
   border-top-left-radius: 24px;
   border-top-right-radius: 24px;
   background-color:#ffffff;
}
.modal-body2-msg {
	position: relative;
	padding:12px 0 16px;
	text-align:center;
}
.modal-body2-msg .h1-line {
	text-align:center;
	margin-top:24px;
	padding:8px 0 4px;
	font-size:18px;
	font-weight:600;
}
.modal-body2-msg .h1-line-btn {
	position: absolute;
	top:30px;
	left:10px;
	width:100px;
	text-align:center;
	font-size:11px;
	font-weight:600;
	border: 1px solid #ddd;
    padding: 6px;
	border-radius:4px;
    color: #fff;
    background-image: linear-gradient(315deg, #079bff 0%, #55d4ff 100%);
    cursor: pointer;
}
.modal-body2-msg .h2-line {
	text-align:center;
	font-size:14px;
}
.modal-content2 {
	position: relative;
    width: 100%;
	margin-top:60px;
	height:calc(100vh - 60px) !important;
	overflow-y:auto;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-top-left-radius: 24px;
	border-top-right-radius: 24px;
    outline: 0;
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.close-btn {
    position: fixed;
    cursor: pointer;
    top:95px;
	left:0;
	right:0;
	margin:auto;
	padding-right:20px;
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
	width:100%;
	max-width:980px;
	text-align:right;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=70);
    opacity: .7;
    z-index: 999;
}
.cd-slider {
	position: relative;
	width: 100%;
	height: 1020px;
	/*height: calc(100vw - 0px); */	
	background: transparent;
	overflow: hidden;
}
.item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	list-style: none;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: -webkit-transform 1s ;
	-moz-transition: -moz-transform 1s ;
	-o-transition: -o-transform 1s ;
	transition: transform 1s ;
}
.item-card {
	position: relative;
	margin:auto;
	max-width: 980px;
}
.item-card-msg {
    position: relative;
	padding:18px 0;
}
.item-card-msg .msg-title {
    position: relative;
    line-height: 1.3;
	margin:auto;
    max-width: 600px;
    width: 90%;
	padding:0 0 12px 0;
    word-break: keep-all;
    letter-spacing: -1px;
    font-size: 20px;
    text-align: center;
}
.item-card-msg .msg-sub-p {
    position: relative;
    line-height: 1.3;
	margin:auto;
    max-width: 600px;
    width: 90%;
    letter-spacing: -0.5px;
    font-size: 16px;
    text-align: center;
}
.prev, .next {
	position: absolute;
	top: 70%;
	left: 5%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
}
.next {
	right: 5%;
	left: auto;
}
.hide-nav {
	visibility: hidden;
}
.prev_slide {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
}
.current {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}

.Preview-BackCard-bg {
	background-color:#ffffff;
}


.modal-body {
    max-height: 70vh;
}
.col-md-img {   
     width: 100%;
	 padding:30px 0;
}
.col-md-display {   
	 position: relative;
     width: 100%;
}
.modal-lg-preview {
    margin: auto !important;	
    width: 100% !important;
	max-width:980px;
}
.modal-lg2 {
    margin: 0 auto !important;
    width: 100% !important;
	max-width:980px;
}
.pet-maxwidth {
    position: relative;
    margin: auto;
    max-width: 480px;
    padding: 0 35px 135px 35px;
}
.input_subbox {
    padding: 8px 0 0 0;
}
.pet-front-msg {
    position: relative;
    line-height: 1.3;
    max-width: 600px;
    word-break: keep-all;
    letter-spacing: -1.8px;
    font-size: 32px;
    text-align: center;
	font-family: 'Noto Sans KR' !important; 
    width: 90%;
    max-width: 660px;
    margin: 60px auto 60px auto;
}
.middle {
    position: relative;
    float: left;
    width: 50%;
    margin-bottom: 12px;
}
.u-fs18 {
    font-size: 18px;
}
.u-tacenter {
    text-align: center;
}
.h-msgbox {
    color: #414b56;
    border: 1px solid #a1a4a6;
    margin: 0 12px;
    padding: 12px;
}
.h-msgbox-btn {
    border: 1px solid #079bff;
    margin: 0 12px;
    padding: 12px;
	color: #fff;
	background-image: linear-gradient(315deg, #079bff 0%, #55d4ff 100%);
}
.u-cu-point {
    cursor: pointer;
}
.TextArea-content {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.TextArea-Wrapper {
    font-size: 16px;
    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 1px;
    outline-offset: 0;
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 60%;
    line-height: normal;
	margin-bottom:8px;
}
.TextArea-input {
    display: block;
    box-sizing: border-box;
    width: 100%;    
    padding: 8px 10px;
	font-size:14px;
	line-height:1.1;
    border: none;
    outline: none;
	resize: none; 
}
select, textarea {
    border-radius: 0;
}
textarea {
    overflow: auto;
}
.into-menu {
	padding:0 16px;
	display:none;
}
.into-menu-back {
	padding:8px 24px;
	font-size:14px;
}
@font-face {
    font-family: 'LINESeedKR-Bd';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2');   
    font-style: normal;
}
.vcard-back-image {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
	background-color:#ffffff;
}
.nfc_card_company {
    position: absolute;
    top: 30%;
    left: 13%;
    font-size: 30px;
    line-height: 1;
    color: #000;
    z-index: 999;
    font-family: 'LINESeedKR-Bd';
    font-weight: 700;
    font-style: normal;
}
.nfc_card_youname {
	position: absolute;
	top: 34%;
	left: 13%;
	font-size: 20px;
	font-weight: 400;
	color: #000;
	z-index: 999;
	font-family: 'LINESeedKR-Bd';
	font-style: normal;
}
		.preview-in-text {
			position: absolute;
			top: 12%;
			left: 6%;
			font-size: 22px;
			line-height: 1;
			color: #000;
			z-index: 999;
			font-family: 'LINESeedKR-Bd';
			font-weight: 700;
			font-style: normal;
		}
		.preview-in-text2 {
			position: absolute;
			top: 19%;
			left: 6%;
			font-size: 18px;
			font-weight: 400;
			color: #000;
			z-index: 999;
			font-family: 'LINESeedKR-Bd';
			font-style: normal;
		}
.cd-label {
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #666;
    margin-bottom: 8px !important;
}
.pet-inputbox {
    width: 100%;
    height: 46px;
    background: #ffffff;
    border: 1px solid #dddddd;
    color: #1d1d20;
    font-size: 14px;
    padding: 0 16px;
    line-height: 14px;
    box-sizing: border-box;
    border-radius: 3px;
    transition: .3s;
}
.Canvas-zone-line {
	position: relative;
}
.Controls-close-itext {
	position: absolute;
	top: -20px;
	left:auto;
	right: 0;
	width:40px;
	height: 40px;
	font-size: 32px;
	line-height:32px;
	text-align:center;
	color:#333;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #f9f9f9;
	z-index:99;
}
.menu-popup-i-text {
	position: absolute;	
	bottom:50px; /* 2 */
	left:0;
	right:0;
	margin:auto;
	width:100%;
	max-width:690px;
	padding:8px 8px 0 8px;
	display:none;
	border: 1px solid #ddd;
    background-color: #f9f9f9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.25);
	z-index:999;
}
.menu-popup {
	position: absolute;	
	top:0;
	left:-100px;
	right:0;
	width:300px;
	min-height:100%;
	padding:32px;
	display:none;
	background-color: #f9f9f9;
	border:1px solid #ddd;
	z-index:1;
}
.menu-title-line-itext {
	font-size:14px;
	text-align:center;
	margin:0 0 14px 0;
}
.menu-title-line {
	display:flex;
	flex-basis:100%;
	align-items:center;
	font-size:14px;
	margin:0 0 12px 0;
}
.menu-title-line::before{
	content:"";
	flex-grow:1;
	margin:0 16px;
	background:rgba(0,0,0,0.35);
	height:1px;
	font-size:0px;
	line-height:0px;
}

.menu-title-line:after {
	content:"";
	flex-grow:1;
	margin:0 16px;
	background:rgba(0,0,0,0.35);
	height:1px;
	font-size:0px;
	line-height:0px;
}
.menu-box-zoom { display:none;}
@media screen and (max-width: 1000px) {
	.cd-slider {
		height: calc(100vw + 50px);
	}
	.item-card-msg, .pet-front-msg {font-size:18px;}
	.prev { left: 5%; }
	.next { right: 5%; }
}
@media screen and (max-width:1160px) {
		#Canvas-header {
			height:50px;
		}
		.tapme_logo {
			display:none;
		}
		.menu-btn {
			width:25%;
		}
		.menu-reload-btn {
			margin-top:-46px;
			margin-left:18px;
		}
		.menu-reload-btn .menu_icon {
			width:24px;
		}
		.Canvas-container{
			position:relative;
			margin:auto;
			width: 100%; 
			height:calc(var(--vh, 1vh) * 100);
			/*height:calc(100vh - 70px); */						
			overflow:none;			
		}
		.Canvas-container-black{
			position:relative;
			margin:auto;
			width: 100%; 
			min-height: 350px;  
			height:calc(var(--vh, 1vh) * 50);
			/*height:calc(var(--vh, 1vh) * 100); height:calc(100vh - 70px); */						
			overflow:none;			
		}
		.container-out-box{
			position:relative;
			width:100%;			
			height: 800px;
			z-index:0;
		}
		.flip-btn-show {
			bottom:90px;
		}
		.menu-btn-container {
			position:relative;	
			margin:auto;
			top:0;
			width:100%;			
			min-height: 400px; /*min-height: calc(100vh );  height: calc(100vh + 100vw); */
			max-width:100%;
			border-width:2px 0 0 0;
			border-color: #ddd;
			border-style:solid;
			background-color: #ffffff;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
			box-shadow: none;
		}
		.menu-btn-boxline {			
			padding-bottom:0px;
			height:350px;
			overflow-y:auto;
		}
		.menu-box {
			top: 1000px;
			bottom:auto;
			left:0;
			right:0;
			margin:auto;
			width: 100%;
			transform: translateY(1000px)!important;
			/*height: calc(100vh - calc(100vw + 0));  /*calc(100vh - 100vw - 112px);  */
			height:800px; 
			border-width:1px 0 0 0;
			border-color: #ddd;
			border-style:solid;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
			box-shadow: none;
			display:none;

		}
		.menu-vh-height {
			height:  1000px !important; 
			top: 120px !important; 
			border:1px solid #ddd;
			background-color: #f9f9f9;
			-webkit-border-radius: 12px 12px 0 0;
			-moz-border-radius: 12px 12px 0 0;
			border-radius:12px 12px 0 0;
			box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
		}
		.textControls-inbox {
			position:relative;
			padding:18px 20px;		
		}
		.menu_icon {
			width: 30px;
		}

		.Controls-close {
			position: absolute;
			top: -12px;
			left:auto;
			right: 10px;
			width:40px;
			height: 40px;
			font-size: 32px;
			color:#333;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			background-color: #f9f9f9;
			z-index:999;
		}

	.select-font-box {
			display:none;
			position: absolute;
			top:136px;
			left:20px;
			right:20px;
			background-color: #f9f9f9;
	}
	.menu-box-show {
		  top: 100vw; 
		  transform: translateY(0)!important;
		  display:block;
		  -webkit-transition: all 0s ease-in-out;
		  transition: all 0s ease-in-out;
		  z-index:9;
	}
	.menu-popup {
		position: absolute;	
		top:0;
		left:0;
		right:0;
		width:100%;
		height:100%;
		padding:32px;
		border:0px solid #ddd;
		z-index:3;
	}
}

@media screen and (max-width:680px) {
		.menu-box-zoom { display:block;}
		.menu-popup-i-text {
			bottom:-30px; /* 2 */
		}
		.container-out-box{
			/*margin-top:-20px; */
			margin-top: calc(-15vw); /*   Ä«·ÎÄ«µå ¸ðµåÀ϶§ */
			height: calc(100vw + 0px);
		}
		.menu-btn-container {
			margin-top:30px; 
			/*margin-top: calc(-15vw);    Ä«·ÎÄ«µå ¸ðµåÀ϶§ */
			min-height: 350px; /*  min-height: calc(100vh );  height: calc(100vh - 100vw); */
		}
}


@media screen and (max-width:680px) {
		.nfc_card_company {
			top: 30%;
			left: 13%;
			font-size: 26px;
		}
		.nfc_card_youname {
			top: 34%;
			left: 13%;
			font-size: 18px;
		}
		.preview-in-text {
			top: 12%;
			left: 6%;
			font-size: 18px;
		}
		.preview-in-text2 {
			top: 19%;
			left: 6%;
			font-size: 16px;
		}
		.Preview-img-radius {
			-webkit-border-radius: 12px;
			-moz-border-radius: 12px;
			border-radius: 12px;
		}
		.Preview-img-radius02 {
			-webkit-border-radius: 8px;
			-moz-border-radius: 8px;
			border-radius: 8px;
		}

}
@media screen and (max-width:540px) {
		.nfc_card_company {
			top: 30%;
			left: 13%;
			font-size: 20px;
		}
		.nfc_card_youname {
			top: 34%;
			left: 13%;
			font-size: 14px;
		}
		.preview-in-text {
			top: 12%;
			left: 6%;
			font-size: 16px;
		}
		.preview-in-text2 {
			top: 19%;
			left: 6%;
			font-size: 12px;
		}
		.pet-front-msg {
			font-size: 24px;
		}
}
@media screen and (max-width:460px) {
		.nfc_card_company {
			top: 30%;
			left: 13%;
			font-size: 18px;
		}
		.nfc_card_youname {
			top: 34%;
			left: 13%;
			font-size: 14px;
		}
		.preview-in-text {
			top: 12%;
			left: 6%;
			font-size: 18px;
		}
		.preview-in-text2 {
			top: 19%;
			left: 6%;
			font-size: 14px;
		}
		.pet-front-msg {
			font-size: 20px;
		}
}
@media screen and (max-width:380px) {
		.menu-box {
			top: calc(100vw - 80px); 
		}	
		.nfc_card_company {
			top: 30%;
			left: 13%;
			font-size: 16px;
		}
		.nfc_card_youname {
			top: 34%;
			left: 13%;
			font-size: 12px;
		}
		.preview-in-text {
			top: 12%;
			left: 6%;
			font-size: 16px;
		}
		.preview-in-text2 {
			top: 19%;
			left: 6%;
			font-size: 12px;
		}
}