@charset "utf-8";
/* CSS Document */

.categoryTitle{width: 100%; height: 380px; text-align: center; background:url(/images/img_category_search.jpg) no-repeat 50% 0 #f3dded; margin-bottom: 80px; display: none;}
.categoryTitle h1{position: relative; top: 50%; transform: translateY(-50%); font-size: 50px; color: #fff;}

.bubble 
{
	z-index:100;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -25px;
	height: auto;
	padding: 15px 25px;
	background: #FFFFFF;
	border-radius: 30px;
	border: #fff solid 1px;
	font-size: 13px;
	white-space: nowrap;
	color: #e14846;
	font-weight: bold;
	margin-top: -15px;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

.bubble::after 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 10px 0 8.5px;
	border-color: #FFFFFF transparent;
	display: block;
	width: 0;
	z-index: 1;
	bottom: -9.5px; 
	left: 50%;
	transform: translateX(-50%);
}

.bubble::before 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 10px 0 8.5px;
	border-color: #bbb transparent;
	display: block;
	width: 0;
	z-index: 0;
	bottom: -11px;
	left: 50%;
	transform: translateX(-50%);
}

.printing_infoBox{background: #fff; border: 0; border-radius: 5px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%);}
.printing_infoBox .tabBox{background: #000000; border-radius: 5px 5px 0 0; padding: 10px 90px 0 90px; position: relative;}
.printing_infoBox .tabBox ul{list-style: none; width: 100%; padding: 0; margin: 0; display: flex; justify-content: space-between; position: relative; z-index: 2;}
.printing_infoBox .tabBox ul li{display: block; color: #fff; font-size: 18px; position: relative; cursor: pointer; background: #000000; padding: 20px 60px; border-radius: 3px 3px 0 0;}
.printing_infoBox .tabBox ul li.last{color: #fff;}
.printing_infoBox .tabBox ul li.on{color: #000; font-weight: bold; background: #fff;}
.printing_infoBox .tabBox .bgline{width: calc(100% - 180px); height: 1px; background: #afc3b9; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); z-index: 1; margin-top: 1px; display: none;}
.printing_infoBox .tabsContents{padding: 50px 80px;}
.printing_infoBox .tabsContents span{display: block; font-size: 13px; color: #555555;}
.printing_infoBox .tabsContents .stapbox{padding: 0; margin: 0; margin-top: 40px; list-style: none; display: flex; justify-content: space-between;}
.printing_infoBox .tabsContents .stapbox li{display: block; text-align: center; width: 80px;}
.printing_infoBox .tabsContents .stapbox li span{font-size: 12px;}
.printing_infoBox .tabsContents .stapbox li .roundBox{background: #fff; width: 80px; height: 80px; margin-bottom:10px; border-radius: 80px; position: relative; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%);}
.printing_infoBox .tabsContents .stapbox li .roundBox span{font-size: 36px; color: #000; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.printing_infoBox .tabsContents .stapbox li.arrow{position: relative;}
.printing_infoBox .tabsContents .stapbox li.arrow span{font-size: 30px; color: #000; position: relative; top: 25px;}

.in_upload {}
.in_upload .upload_progressbar
{
	position:relative;
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 240px) !important;
}
.in_upload .upload_progressbar .mov_progressbar
{
	border:2px dashed #000000;
	background: #fff;
	height: 70px;
	width: 100% !important;
	overflow: hidden;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
}
.in_upload .upload_progressbar .mov_progressbar	.infoText
{
	display: block;
	position: absolute;
	left: 30px;							
	top: 0;
	color: #000000;
	line-height: 70px;
	z-index: 2;
	font-size: 16px;
}
.in_upload .upload_progressbar .mov_progressbar .on
{
	background: #05b024;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0%;
	overflow: hidden;
}
.in_upload .upload_progressbar .mov_progressbar .on .uploadPer
{
	display: block;
	position: absolute;
	right: 30px;
	top: 0;
	color: #fff !important;
	line-height: 70px;
	z-index: 2;
	font-size: 16px;
}
.in_upload .upload
{

	cursor: pointer;
	background: #000000;
	color: #fff;
	margin-left: 10px;
	height: 70px;
	width: 220px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	text-align: center;
	line-height: 70px;
	font-size: 16px;

}
.in_upload .upload_display
{
	display: block;
	position: absolute;
	width: 100%;
	left: 0;							
	top: 0;
	color: #fff !important;
	line-height: 70px;
	z-index: 2;
	font-size: 16px;
	text-align: center;
	animation: blink-effect 1s step-end infinite;
}

@keyframes blink-effect { 
	50% { 
		opacity: 0; 
	} 
}
.in_upload .upload_del
{
	cursor: pointer;
	background: #aaa;
	color: #fff;
	margin-left: 10px;
	height: 70px;
	width: 100%;
	display: inline-block;
	position: relative;
	vertical-align: top;
	text-align: center;
	line-height: 70px;
}

.addimgFile{width: 85%; margin: 0 auto;}
.addimgFile .addFile{margin-bottom: 40px; position: relative;}
.addimgFile .addFile h1{font-size: 26px; text-align: center; margin:50px 0; padding: 0; font-weight: bold;}

.addimgFile .fileInfo{background: #fff; border-radius: 5px; padding:30px 40px; margin-bottom: 40px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%);}
.addimgFile .fileInfo ul{padding: 0; margin: 0; list-style-position: inside;}
.addimgFile .fileInfo ul li{line-height: 34px; font-size: 13px; color: #000; list-style: none;}
.addimgFile .fileInfo ul li::before{font-family: "Material Icons"; content: '\e5cc'; color: #000000; font-size: 16px; line-height: 34px; vertical-align: middle; font-weight: bold; display: inline-block; margin-right: 15px;}

.uploadedImgBox{width: 85%; margin: 0 auto; margin-bottom: 100px;}
.uploadedImgBox h2{font-size: 26px; text-align: center; padding: 0; margin:30px 0; padding-bottom: 20px; font-weight: bold;  border-bottom: 1px solid rgba(0, 0, 0, 0.063);}
.uploadedImgBox .myimglist{}
.uploadedImgBox .myimglist .myuploadImage01{width: 100%; max-width: 220px; margin-bottom: 40px;}
.uploadedImgBox .myimglist .myuploadImage01 .img{position: relative; width: 100%; max-width: 220px; height: 0; overflow: hidden; padding-bottom: 100%; border-radius: 4px; margin-bottom: 15px; transform: translate3d(0,0,0);}
.uploadedImgBox .myimglist .myuploadImage01 .img img{width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: .5s;}
.uploadedImgBox .myimglist .myuploadImage01 .img:hover img{transform: scale(1.1);}
.uploadedImgBox .myimglist .myuploadImage01 .btnWrap{margin-bottom: 10px; display: flex; justify-content: space-between;}
.uploadedImgBox .myimglist .myuploadImage01 .btnWrap .btn{background: #000000; border-radius: 3px; width: 48%;}
.uploadedImgBox .myimglist .myuploadImage01 .btnWrap .btn a{color: #fff; text-decoration: none; display: block; width: 100%; height: 30px; line-height: 30px; vertical-align: middle; box-sizing: border-box; font-size: 13px;}
.uploadedImgBox .myimglist .myuploadImage01 .btnWrap .btn a span{vertical-align: middle; margin-right: 5px; font-size: 16px; margin-top:1px;}
.uploadedImgBox .myimglist .myuploadImage01 .btnWrap .btn.btn_delete{background: #fff; border: 1px solid #ccc;}
.uploadedImgBox .myimglist .myuploadImage01 .btnWrap .btn.btn_delete a{ color: #666;}