/* ---------- DIV ---------- */
.div_box {
	margin: auto;
	width: 850px;
}
.div_box2 {
	width: 100%;
	background-color:#ffffff;
}
.div_box3 {
	padding:0px 0px 0px 50px;
	background-color:#ffffff;
}
.div_address {
	width: 100%;
	margin:0px;
	-background-color:#f6f6f6;
	background-color:#ffffff;
}
.div_address_col {
    width: 50%;
    padding: 0px;
	float:left;
}
.div_cart {
	width:500px;
	float:left;
	background-color:#ffffff;
}
.div_cart1 {
	width:auto;
	min-width:300px;
}
.div_cart2 {
	clear:left;
}
.div_cart3 {
	position: relative;
/*	width:150px;*/
	width:200px;
	height:300px;
	float:left;
	color: #006699;
	background-color:#f6f6f6;
}
.div_cart3:hover .img_conatainer img {
	position:relative;
	height:110%;
	top:-5%;
	left:-5%;
}
.div_cart4 {
	padding:10px;
	overflow-wrap: break-word;
}
.of_font_icon2
{
	font-size:50px;
	color: #999;
}
.img_conatainer {
	text-align:center;
	height:100px;
	line-height: 125px;
	overflow:hidden;
	background-color: white;
	cursor: zoom-in;
}
.overlay {
	position:absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	overflow:hidden;
	opacity: 1;
}
.oos {
	display:block;
	position:absolute;
	bottom: -10px;
	right: -70px;
	background-color:#FF0000;
	opacity:0.6;
	width:300px;
	height:35px;
	line-height:35px;
	color:#FFFFFF;
	font-size:16px;
	text-align:left;
	text-indent:160px;
	vertical-align:middle;
	transform: rotate(-45deg);
}
/* ---------- BOX ---------- */
.box_1 {
	width:100%;
	border-collapse:collapse;
	border-spacing:0px;
	border:0px;
}
.box_1 th {
	padding:5px 5px;
	height:30px;
}
.box_1 td {
	padding:5px 5px;
	min-height: 40px;
}
.box_3 {
	width:100%;
	border-collapse:collapse;
	border-spacing:0px;
	border:0px;
}
.box_3 td {
	padding:0px;
}
.box_total {
	border-top:solid 1px #999999;
	border-bottom:double 3px #999999;
	background-color:#FFFFCA;
	text-align:right;
	font-weight:bold;
}
.box_address {
	background-color:#f6f6f6;
	border:1px solid #eeeeee;
	color:#666;
}
/* ---------- BOX ---------- */
.box_category {
	width:100%;
	border:0px;
	border-collapse:collapse;
	border-spacing:0px;
	background-color:#F6F6F6;
}
.box_category th {
	font-weight:normal;
	color:#ffffff;
	background-color:#006699;
	padding:0px 5px;
	height:30px;
}
.box_category td {
	min-height:40px;
	padding:0px;
	border-bottom:solid 1px #E6E6E6;
}
/* ---------- BOX ---------- */
.box_process {
	width:100%;
	height:80px;
	margin:auto;
	border-collapse:collapse;
	border-spacing:0px;
	background-color:#f6f6f6;
}
.box_process td {
	padding:0px 0px;
}
/* ---------- BOX ---------- */
.step0  {text-align:center;}
.step1  {color:#336699;}
.step2  {color:#CC6600;}
.step3  {color:#666666;}
.step0b {color:#FFFFFF; font-size:14px; font-weight:bold; border-radius:50%; text-align:center; margin-top:10px; padding-top:10px; height:30px; width:40px;}
.step1b {background-color:#336699;}
.step2b {background-color:#CC6600;}
.step3b {background-color:#999999;}
.stepx  {color:#CCCCCC; text-decoration:line-through;}
.stepxb {background-color:#CCCCCC;}

/* ---------- progress bar ---------- */
.container
{
	width:100%;
	-height:90px;
	height:110px;
	background-color:#f6f6f6;
}
.progressbar
{
	margin:15px 0;
	padding:10px 0;
	counter-reset:step;
}
.progressbar li
{
	list-style-type:none;
	float:left;
	width:14%;
	color:#666;
	position:relative;
	text-align:center;
	z-index:1;
}
.progressbar li:before
{
	-content:counter(step);
	-counter-increment:step;
	width:40px;
	height:40px;
	line-height:40px;
	border:0;
	display:block;
	text-align:center;
	margin:0 auto 10px auto;
	border-radius:50px;
	background-color:#999;
	color:white;
	-font-family:Arial, Helvetica, sans-serif;
	font-family:"Font Awesome 5 Free";
	font-size:25px;
	font-weight:bold;
	z-index:0;
	box-shadow:#ccc 0 0 0 5px;
}
.progressbar li:after
{
	content:"";
	position:absolute;
	width:80%;
	height:2px;
	background-color:#999;
	top:20px;
	-left:-40%;
	z-index:-1;
	display:block;
}
.progressbar li:first-child:after
{
	content:none;
}
.progressbar li.active
{
	color:#CC6600;
}
.progressbar li.active:before
{
	background-color:#CC6600;
	box-shadow:#ffeb3b 0 0 0 5px;

	font-size: 35px;
	width:60px;
	height:60px;
	line-height:60px;
	margin:-10px auto 10px auto;
}
.progressbar li.active + li:after
{
	background-color:#CC6600;
	left:-33%;
}
.progressbar li.pass
{
	color:#336699;
}
.progressbar li.pass:before
{
	background-color:#336699;
	box-shadow:#b1d6FF 0 0 0 5px;
}
.progressbar li.pass + li:after
{
	background-color:#336699;
}
.progressbar li.disable2
{
	color:#ccc;
	text-decoration:line-through;
}
.progressbar li.disable2:before
{
	background-color:#ccc;
	box-shadow:#ddd 0 0 0 5px;
}
.progressbar li.disable2 + li:after
{
	background-color:#ccc;
}
/* ---------- FONT ---------- */
.font1 {
	color: #006699;
	font-size:13px;
}
.font1 a:link     {color: #006699;}
.font1 a:visited  {color: #006699;}
.font1 a:hover    {color: #FF6600; text-decoration: none;}
.font2 {
	-font-weight:bold;
	background-color:#F6F6F6;
}
.font3 {
	color: var(--cc-alert);
	font-size:13px;
}
.font4 {
	text-indent:50px;
	width:200px;
	min-width:120px;
	max-width:200px;
}
.font5 {
	color: #666;
	font-size:16px;
}
.font6 {
	color: #003366;
	font-size:16px;
}
.font7 {font-size:16px;}
.font8 {color:#cf412d;}

.font9 {
	font-family: 'Racing Sans One', cursive;
	color:#999;
	font-size: 20px;
	text-decoration: underline;
	text-align: center;
	height:40px;
	background-color: white;
}
.font10 {
	font-family: 'Racing Sans One', cursive;
	color:#999;
	font-size: 16px;
	text-align: left;
	line-height: 30px;
	height:30px;
	background-color: white;
}

/* ---------- INPUT ---------- */
.input1 {
	width:400px;
	min-width:200px;
	max-width:400px;
	box-sizing: border-box;
}
.input2 {
	width:200px;
	min-width:200px;
	box-sizing: border-box;
}

/* ---------- hover ---------- */
.hvr-fade2 {
	margin:10px 3px;
	display: inline-block;
	overflow: hidden;
	border: solid 2px #f6f6f6;
	-box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.2);
	vertical-align:top;
}
.hvr-fade2:hover, .hvr-fade2:focus, .hvr-fade2:active {
	border: solid 2px #80bdff;
	box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.2);
	-box-shadow: 0 3px 6px 2px #80bdff;
}
.hvr-fade2:hover div.div_cart4 {
	-color:#fff;
	-background-color:#80bdff;
}
.hvr-fade2 a:link,
.hvr-fade2 a:visited,
.hvr-fade2 a:hover  {
	color: inherit;
	text-decoration: none;
}
@media only screen and (max-width: 850px) {
	.container,
	.box_process {
		display:none;
	}
	.div_box {
		width: 100%;
	}
	.div_box3 {
		padding:0px;
	}
	.div_address {
		width: 100%;
		margin:0px;
	}
	.div_address_col {
	    display:block;
		width: 100%;
	}
	.div_cart {
		width: 100%;
	}
	.font4 {
		text-indent:0px;
		text-align: right;
	}
	.font5 {
		-font-size: 13px;
		color:#333;
	}
	.input1 {
		width:100%;
	}
	.box_address {
		border:none;
		border-top:1px solid #eeeeee;
	}
}
@media only screen and (max-width: 500px) {
	.div_cart2 {
		width: 100%;
	}
	.input2 {
		width:100%;
	}
	.mb-mode {
		display:none;
	}
}