:root {
   --vh: 100%;
}
html {
  scroll-behavior: smooth;
 } 
body {
	width:100%;
	/*background-color: #f9f9f9; */
	background-color: #f9f9f9;
}
 /* Card flip-container */
  .flip-container {
  position: relative;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  transform: scale(1);
  z-index:2;
}


.flip-container.hover .flipper {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.flip-container.hover .front {
		opacity: 0;
}

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;  
	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
	margin:auto;
	max-width:800px;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity .6s;
	position: absolute;
	top: 0;
	left: 0;
}

.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
  /* Card flip-container End */

.checkbox-flipper {
	position: absolute;
	top:30px;
	left:0;
	right:0;
	margin:auto;
	text-align:center;
	width:64px;
	height:40px;
	z-index:2;
}

   .checkbox-wrapper-6 .tgl {
    display: none;
  }
  .checkbox-wrapper-6 .tgl,
  .checkbox-wrapper-6 .tgl:after,
  .checkbox-wrapper-6 .tgl:before,
  .checkbox-wrapper-6 .tgl *,
  .checkbox-wrapper-6 .tgl *:after,
  .checkbox-wrapper-6 .tgl *:before,
  .checkbox-wrapper-6 .tgl + .tgl-btn {
    box-sizing: border-box;
  }
  .checkbox-wrapper-6 .tgl::-moz-selection,
  .checkbox-wrapper-6 .tgl:after::-moz-selection,
  .checkbox-wrapper-6 .tgl:before::-moz-selection,
  .checkbox-wrapper-6 .tgl *::-moz-selection,
  .checkbox-wrapper-6 .tgl *:after::-moz-selection,
  .checkbox-wrapper-6 .tgl *:before::-moz-selection,
  .checkbox-wrapper-6 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-6 .tgl::selection,
  .checkbox-wrapper-6 .tgl:after::selection,
  .checkbox-wrapper-6 .tgl:before::selection,
  .checkbox-wrapper-6 .tgl *::selection,
  .checkbox-wrapper-6 .tgl *:after::selection,
  .checkbox-wrapper-6 .tgl *:before::selection,
  .checkbox-wrapper-6 .tgl + .tgl-btn::selection {
    background: none;
  }
  .checkbox-wrapper-6 .tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 60px;
    height: 30px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .checkbox-wrapper-6 .tgl + .tgl-btn:after,
  .checkbox-wrapper-6 .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
  }
  .checkbox-wrapper-6 .tgl + .tgl-btn:after {
    left: 0;
	content: "앞";
  }
  .checkbox-wrapper-6 .tgl + .tgl-btn:before {
    display: none;
  }
  .checkbox-wrapper-6 .tgl:checked + .tgl-btn:after {
    left: 50%;
	content: "뒤";
  }

  .checkbox-wrapper-6 .tgl-light + .tgl-btn {
    background: #f0f0f0;
    border-radius: 30px;
    padding: 2px;
	line-height:24px;
	font-size:12px;
	border:2px solid #9FD6AE;
    transition: all 0.4s ease;
  }
  .checkbox-wrapper-6 .tgl-light + .tgl-btn:after {
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
  }
  .checkbox-wrapper-6 .tgl-light:checked + .tgl-btn {
    background: #9FD6AE;
  }

#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: calc(100vh + 10px);  */
	background-color: #f9f9f9;
	overflow: hidden; 
}
.container-guideline {
    position: absolute;
	top:15%;
	left:10%;
	right:0;
	font-size:12px;
	color:#ff0000;
	z-index:99;
	display:none;
}
.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:80%;
	max-width:540px;
	margin:auto;
	height:auto;
}
.row_img {
	position: relative;
	float:left;
	width:65px;
	height:75px;
}
.web-bg-container {
	position: relative;
	float:left;
	width:60px;
	height:50px;
	border-radius: 4px;
	padding:2px;
	overflow:hidden;
	border: 1px solid #dddddd;
}
.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: 8px 15px;
	margin: 0 16px;
    border: 1px solid #06AAE7;
	background-color: #06AAE7;
    cursor: pointer;
    color: #464646;
    border-radius: 0.2em;
    vertical-align: middle;
}
.upload_icon {
	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:relative;	
	margin:auto;
	margin-left:6px;
	margin-right:6px;
	 /*height:  calc(100vh - 800px);min-height: calc(100vh ); max-width:680px;480px; */
	min-height: 400px;
	border-width:2px 2px 0 2px;
	border-color: #ddd;
	border-style:solid;
	background-color: #ffffff;
	-webkit-border-radius: 12px 12px 0 0 ;
	-moz-border-radius: 12px 12px 0 0 ;
	border-radius: 12px 12px 0 0 ;
	touch-action:manipulation; /* ios touch */
}
.tap-show-box {
	display:none;
}
.menu-btn-boxline {
	position: absolute;
	top:80px;
	left:0;
	right:0;
	margin:auto;
	width:100%;
	min-height:180px;
	max-width:600px;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	padding-top:16px;
	background-color:#ffffff;
	z-index:9;
}
.menu-btn-boxline2 {
    position: relative;
	padding-top:8px;
}
.menu-btn {
	width:25%;
	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:36px;
	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;
	z-index:9;
}
/* 20241108 */
/*
.menu-box {
    position:absolute;
    top: 100px;	
	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-box-show {
	transform: translateX(0)!important;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
*/
.menu-box {
	position:absolute;
	top: 1000px;
	bottom:auto;
	left:0;
	right:0;
	margin:auto;
	width: 100%;
	max-width:680px;
	transform: translateY(1000px)!important;	
	height:1200px; 
	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);
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	z-index:10;
	display:none;
}
.menu-box-show {
	  top: 100px; 
	  transform: translateY(0)!important;
	  display:block;
	  -webkit-transition: all 0s ease-in-out;
	  transition: all 0s ease-in-out;
	  display:block;
}
.menu-font-display {display:none;}
.menu-img-display {display:none;}

.textControls-inbox {
	position:relative;
	padding:30px;
}

.bg-color-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
	width:100%;
	max-width:600px;
	margin:auto;
}
.frame-border-box {
	position: relative;
    width: 70px;
    height: 50px;
	color:#333;
	line-height:50px;
	text-align:center;
    overflow: hidden;
    display: inline-block;
	padding:2px;
    margin: 2px 2px 6px 2px;
    white-space: nowrap;
    vertical-align: middle;
	border:1px solid #ddd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
	background-color:#f9f9f9;
}
.frame-border-cover {
	position: absolute;
	width:100%;
	height:100%;
	background-repeat: no-repeat;
    background-size: 856px 540px;
    background-position: -30px -30px;
}
.frame-border-bg01 {
		background-image: url(../canvas-img/frame-border-01.svg?);
}
.frame-border-bg02 {
		background-image: url(../canvas-img/frame-border-02.svg);
}
.frame-border-bg03 {
		background-image: url(../canvas-img/frame-border-03.svg);
}
.frame-border-bg04 {
		background-image: url(../canvas-img/frame-border-04.svg);
}
.frame-border-bg05 {
		background-image: url(../canvas-img/frame-border-05.svg);
}
.frame-border-bg06 {
		background-image: url(../canvas-img/frame-border-06.svg);
}
.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: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
	background-color:#dddddd;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*.bg-color-boxbg {background-color:#10A1FF;} */
.bg-color-boxbg {		
	background-image: url(../canvas-img/canvas_bg_black.png);
}


.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;}

.sns-iconbox-black, .sns-iconbox-white {
	display:none;
}
.sns-iconbox-flex {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    max-width: 580px;
    margin: auto;
}
.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 {
    margin: auto;
    padding: 12px;   
    line-height: 19px;
    color: white;
	display: block;
    background: #000000;
    border-radius: 12px;
	text-align:center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: 0.4s ease all;
    transition: 0.4s ease all;
	cursor: pointer;
}
.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;
}
.Font-select-content {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
}
.selector-font-templates {
    position: relative;
    height: 38px;
    border-radius: 16px;
    overflow: hidden;
	margin:4px 4px 0 4px;
    padding: 0 4px;
    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:'Montserrat' !important; }
.selector-font-style13  {font-family:'Contrail One' !important; }
.selector-font-style14  {font-family:'Caramel' !important; }

.selector-font-templates.active {
    color: red;
    box-shadow: 0 0 0 2px #10A1FF;
}
.color-picker{
    height: 36px;
	width:36px;
	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:14px;
	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:65px;
	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); overflow: hidden;*/	
	background: transparent;	
}
.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: 14px;
    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;
}
.pet-maxwidth2 {
    position: relative;
    margin: auto;
    max-width: 480px;
    padding: 0 35px 35px 35px;
}
.input_subbox {
    padding: 8px 0 0 0;
}
.pet-front-msg {
    position: relative;
    line-height: 1.5;
    font-size: 14px;
    text-align: left;
	padding:12px 16px;
    margin: 24px auto 60px auto;
	border:1px solid #d3d3d3;
	border-radius: 10px;
}
.start-msg-box {
    position: relative;
    line-height: 1.3;
    font-size: 14px;
    text-align: center;
	padding:12px 16px;
    margin: 24px auto ;
}
.start-msg-box-title {
	font-size: 18px;
	font-weight:700;
	padding:16px 0;
}
.pet-front-msg span {
	font-weight:700;
}
.middle {
    position: relative;
    float: left;
    width: 50%;
    margin-bottom: 12px;
}
.u-fs18 {
    font-size: 14px;
}
.u-tacenter {
    text-align: center;
}
.h-msgbox {
    color: #414b56;
    border: 1px solid #a1a4a6;
    margin: 0 6px;
    padding: 12px 6px;
	border-radius: 10px;
}
.h-msgbox-btn {
    border: 1px solid #079bff;
    margin: 0 6px;
    padding: 12px 6px;
	border-radius: 10px;
	color: #fff;
	background-image: linear-gradient(315deg, #079bff 0%, #55d4ff 100%);
}
.u-cu-point {
    cursor: pointer;
}
.TextArea-content {
	position: relative;
	margin:0px; 
	display: flex;
	justify-content: center;
	align-items: center;
}
.TextArea-Wrapper {
    font-size: 16px;
    background: #fff;
    border: 1px solid #dddddd;
    border-radius: 10px;
    outline-offset: 0;
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    line-height: normal;
}
.TextArea-input {
    display: block;
    box-sizing: border-box;
    width: 100%;   
    padding: 8px 10px;
	font-size:14px;
	line-height:1.1;
	border-radius: 10px;
    border: none;
    outline: none;
	resize: none; 
}
select, textarea {
    border-radius: 0;
}
textarea {
    overflow: auto;
}
.into-menu {
	margin:auto;
	max-width:560px;
	display:none;
}
.into-menu-inbox {
	margin:0 16px;
}
.into-menu-back {
	padding:8px 24px;
	font-size:14px;
}
.into-menu-msgbox {
	padding:8px 24px;
	font-size:14px;
	line-height:1.8;
}
@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;
	background-size: cover;
}
.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: relative;   
    margin: auto;
	width:100%;
	max-width:700px;
	padding:0 8px 0 8px;
	display:none;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	z-index:2;
}
/* 20241108 */
/*
.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-popup {
		position: absolute;	
		top:10px;
		left:0;
		right:0;
		margin:auto;
		width:100%;
		max-width:640px;	
		min-height:180px;
		padding:32px 24px;
		display:none;
		background-color: #ffffff;
		
		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;}

.drag-file-area {
	border: 1px dashed #10A1FF;
	border-radius: 10px;
	margin: 0 16px;
	padding: 8px 8px;
	text-align: center;
	cursor: pointer;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
}
.drag-file-icons {
	margin-right:10px;
	width: 20px;
	height:20px;
	display:block;   
}
.drag-file-area .dynamic-message {
	font-size: 12px;
	color:#666;
	width:100%;
}
.dynamic-message .dy-txt {
	font-size: 14px;
	margin-top:6px;
	padding-left:8px;
	color:#000;
	text-align:left;
}
.back-card-icons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 200px;
	margin:auto;
}
.back-card-icons .icon-item img {
	margin:8px;
	width:40px;
	height:40px;
	display:block;
	
}

.menu-btn-sumbit {
    position: relative;
    width: 100%;
    padding: 18px 0;
	margin:16px 16px 8px 16px;
    text-align: center;
	border-radius: 12px;
    float: left;
	font-size: 16px;
    line-height: 150%;
	cursor: pointer;
}
.fong_Size {
    max-width: 160px;
	height:30px;
    padding: 0 8px;
    display: block;
    z-index: 999;
}
.font-size-content-box {
    display: flex;
	flex-direction: row;
	align-items: center;
}
.font-size-input-box {
	position: absolute;
	right:3px;
	bottom:3px;
    border-radius: 0;
    border-width: 0;
    box-shadow: none;
    display: block;
    font-size: 16px;
    font-weight: 600;
    height: 20px;
    margin: auto;
	padding:0;
    text-align: center  !important;
    width: 36px;
}
.f_button-gride {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    height: 30px;
    margin:  0 4px 8px 4px;
    padding: 5px;
    width: max-content;
	cursor: pointer;
}
.Preview-image-vertical {	
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
	bottom:0;
    margin: auto;
    width: 57%;
    max-width: 345px;
    overflow: hidden;
    background-color: #FFFFFF;
}
.Preview-image2-vertical  {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
	bottom:0;
    margin: auto;
    width: 57%;
	height:90%;
    max-width: 345px;
	max-height:540px;
    overflow: hidden;
    background-color: #FFFFFF;
}
.P-display-card4-01-vertical {
    position: absolute;
    left: 20%;
    bottom: 44%;
    margin: auto;
    height: 42.8%;
    width: 26.9%;
    overflow: hidden;
    transform: rotate( 20deg );
    background-color: #FFFFFF;
    z-index: 2;
}

.prod-price__all {
    color: #000000;
    font-weight: 800;
}
.product-area-details__title {
    font-weight: 700;
    color: #333;
    display: block;
    line-height: 1.25em;
}
.hp__h4 {
    font-size: 16px;
    line-height: 160%;
    font-weight: 600;
}
.align-right {
    text-align: right;
}
.prod-price__save {
    margin: 6px 0 0 0;
    color: #333;
    font-size: 18px;
    text-decoration: line-through;
}
.cd-label {
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #666;
    margin-bottom: 8px !important;
}
.single-option-selector {
    width: 100%;
    margin-bottom: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 22px 22px 22px 32px;
    cursor: pointer;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
    min-height: 46px;
    display: inline-block !important;
    color: black;
	font-size:14px;
    line-height: 1.2;
}
.textarea-control {
    display: block;
    width: 100%;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #495057;
    background-clip: padding-box;
    border: none;
    background: #ffffff;
    border-radius: 8px;
	border:2px solid #678EFE;
	/*
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
	*/
	resize: none;
	text-transform: none;
}
.bg-h-blue-card {
    background-image: url(../img-file/cart-img/h-blue-back.png);
}
.bg-option-bcard {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
}
.nav-select-color li.active {
    box-shadow: 0 0 0 2px #10A1FF;
}
.nav-select-image  li.active {
    box-shadow: 0 0 0 2px #10A1FF;
}
.frame-border-color li.active {
    box-shadow: 0 0 0 2px #10A1FF;
}
.Mcard-material {
    width:65px;
	margin-bottom:16px;
	text-align:center;
}
.cc-select-color {
	position: relative;
    width:50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    margin: 4px 4px 16px 4px;
    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;
}
.cc-select-image {
	position: relative;
    width:60px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
	padding:2px;
    margin: 4px 4px 16px 4px;
    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;
}
.bg-sample-card-mblack {
    background-image: url(../canvas-img/m_black.png);
}
.bg-sample-card-msilver {
   background-image: url(../canvas-img/m_silver.png);
}
.bg-sample-card-mgold {
    background-image: url(../canvas-img/m_gold.png);
}
.bg-sample-pvc-black {
    background-image: url(../canvas-img/pvc_black.png);
}
.bg-sample-pvc-white {
    background-image: url(../canvas-img/pvc_white.png);
}
.bg-sample-card01 {
    background-image: url(../goods-img/barber_shop.png);
}
.bg-sample-card02 {
    background-image: url(../goods-img/tatoo2-1.png);
}
.bg-sample-card03 {
    background-image: url(../goods-img/lion_icon.png);
}

.Step-By-Btnbox {
	position: relative;
    margin:auto;
	padding:0;
	width:100%;
	height:60px;
	max-width:680px;
}
.price_col  {
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin:auto;
	max-width:320px;
	padding-top: 6px;
	margin-top:6px;
	border-top: 1px solid #E6E8EC;
}
.price_col.price_col_title {
    font-size: 14px;
    line-height: 24px;
}
.price_col p {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
    color: #222222;
}
.price_col_value {
    font-size: 12px;
    line-height: 1.2;
}
.Pickcolor-box {
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: 0 -5px;
}

.Picker-li {
	min-width: 30px;
    height: 40px;
    display: inline-block;
    border-radius: 2px;
    border: 1px solid #0000001a;
    outline: none;
    padding:2px;
    margin: 5px;
    cursor: pointer;
	box-sizing: border-box;
}
.Edit-Objectbox {
	position: absolute;
	top:0;
	width:100%;
	min-height:400px;
	display:none;
	border: 1px solid #ddd;
    background-color: #ffffff;
	padding:8px 0;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
	z-index:99;
}
.menu-btn-font-add {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    background-color: #ffffff;
}
@media screen and (max-width: 1930px) {
		.container-out-box {
			width:650px;
			height: 650px;
		}
}
@media screen and (max-width: 1690px) {
		.container-out-box {
			width:500px;
			height: 500px;
		}
}

@media screen and (max-width:1160px) {
		.checkbox-wrapper-6 {
			margin:auto;
			width:60px;
		}
		.container-out-box {
			width:450px;
			height: 450px;
		}
		#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:36px;
		}
		.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: calc(100vw);  */
			/*height:calc(var(--vh, 1vh) * 50);
			height:calc(var(--vh, 1vh) * 100); height:calc(100vh - 70px); */						
			overflow:none;			
		}
		.flip-btn-show {
			bottom:90px;
		}
		.menu-btn-boxline {			
			padding-bottom:0;		
		}
		.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: 36px;
		}
	.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;
	}
} 
@media screen and (max-width: 820px) {
	/*.cd-slider { height: calc(100vw + 50px);	} */
	.prev { left: 5%; }
	.next { right: 5%; }
	.container-out-box {
		width:500px;
		height: 500px;
	}
}
@media screen and (max-width:680px) {
		.menu-box-zoom { display:block;}
		.menu-popup-i-text {
			/*bottom:-30px;   */
		}
		.container-out-box{
			width:450px;
			height: 450px;
			/*height: calc(100vw + 0px);*/
		}
		.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) {
		.menu-btn-container {
			position:relative;	
			margin:0;
			border-width:2px 0 0 0;
			border-color: #ddd;			
			-webkit-border-radius: 0 ;
			-moz-border-radius: 0 ;
			border-radius:0 ;
		}
		.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;
		}
		.container-out-box{
			width: 100%; /* calc(100vw - 0);     100%;  약간 작게 */
			height: calc(100vw);
		}

}
@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;
		}

}
@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;
		}
}