/*
Theme Name: mbazaar
Author: mbazaar
Description:  mbazaar
Version: 1.0.0
*/

@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 100;
    src: url(fonts/AppleSDGothicNeoUL.woff2) format('woff2'),
    url(fonts/AppleSDGothicNeoUL.woff) format('woff'),
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 200;
    src: url(fonts/AppleSDGothicNeoL.woff2) format('woff2'),
    url(fonts/AppleSDGothicNeoL.woff) format('woff'),
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/AppleSDGothicNeoT.woff2) format('woff2'),
    url(fonts/AppleSDGothicNeoT.woff) format('woff'),
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/AppleSDGothicNeoR.woff2) format('woff2'),
    url(fonts/AppleSDGothicNeoR.woff) format('woff'),
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/AppleSDGothicNeoM.woff2) format('woff2'),
    url(fonts/AppleSDGothicNeoM.woff) format('woff'),
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/AppleSDGothicNeoH.woff2) format('woff2'),
    url(fonts/AppleSDGothicNeoH.woff) format('woff'),
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/AppleSDGothicNeoB.woff2) format('woff2'),
    url(fonts/AppleSDGothicNeoB.woff) format('woff'),
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 800;
    src: url(fonts/AppleSDGothicNeoEB.woff2) format('woff2'),
    url(fonts/AppleSDGothicNeoEB.woff) format('woff'),
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 900;
    src: url(fonts/AppleSDGothicNeoSB.woff2) format('woff2'),
    url(fonts/AppleSDGothicNeoSB.woff) format('woff'),
}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'AppleSDGothicNeo';
}
body{
	overflow-x:hidden;
}
a{
	text-decoration: none;
}
li{
	list-style: none;
	padding: 0;
}
.page-w{
	width: 1200px;
	position:relative;
	margin:0 auto;
}
#sub-top1{
	width:100%;
	background: url(images/sub-bg1.jpg) no-repeat;
	height: 900px;
	background-size:cover;
	background-position:center;
}
.top-phrase{
	padding-top: 200px;
	margin-bottom: 100px;
}
.top-phrase h3{
	font-size: 60px;
	color:#fff;
	margin-top: 30px;
}

.button a{
	display:inline-block;
	font-size:24px;
	color:#fff;
	background:#2f959f;
	border-radius: 10px;
}
#topbtn{
	padding: 15px 40px;
}
.sub-bg-sec{
	position:relative;
	padding:100px 0px;
}
#sub-sec01 h2{
	font-size: 60px;
	text-align: center;
	margin-top: 100px;
}
#sub-sec01 h3{
	text-align: center;
	font-size: 48px;
	margin-top:120px;
}
#sub-sec01 p{
	font-size:24px;
	text-align:center;
}
#sub-sec01 p span{
	display:block;
	color:#2f959f;
	margin-top: 30px;
}
#sub01-img{
	width:400px;
	height: 400px;
	position:absolute;
	left:60%;
	top:60px;
}
.img-ul ul{
	display:flex;
	margin-top: 100px;

}
.img-ul ul li{
	width:33.3%;
	position:relative;
	height: 380px;
	overflow:hidden;
	border-radius: 15px;
	margin: 0 10px;
}
.img-ul ul li img{
	position: absolute;
	left:50%;
	top: 50%;
	width: 100%;
	transform:translate(-50%,-50%);
}
.sub-m-sec1 ul{
	display:flex;
	margin-top: 100px;
	background:#fff;
	border-radius: 20px;
	overflow: hidden;
}
#gub{
	flex-flow:row-reverse;
}
.sub-m-sec1 > ul > li{
	margin: 0px;
	width:50%;
	height: 400px;
}
.sub-m-sec1 > ul > li.cont{
	background:#fff;
	border-radius:20px;
	padding: 30px 40px;
}
.sub-m-sec1 > ul > li.cont#cont2{
	text-align: right;
	position:relative;
}
.sub-m-sec1 > ul > li.cont#cont2 h4{
	margin-top: 80px;
}
.sub-m-sec1 ul li h4{
	font-size:36px;
}
.sub-m-sec1 ul li hr{
	width: 70px;
	height: 2px;
	background:#000;
	border:0;
	margin-top: 20px;
	margin-bottom: 20px;
}
.sub-m-sec1 > ul > li.cont#cont2 hr{
	left:85%;
	position:relative;
}
.sub-m-sec1 ul li.thumb{
	border-radius: 15px;
	overflow:hidden;
	position:relative;
}
.sub-m-sec1 ul li.thumb img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%,-50%);
	width: 105%;
}
.sub-m-sec1 ul.ms1{
	display:block;
	margin-top:0;

}
.sub-m-sec1 ul.ms1 li{
	font-size:18px;
	margin:0;
	line-height: 28px;
	color:#888;
}
#sub-sec01 .sub-m-sec1 ul li.cont p{
	font-size:24px;
	text-align:left;
}
#sub-sec02{
	background:#F5FFF9;
}
#sub-sec03{
	background:#F5F9FF;
}
#sub-sec02 h3,
#sub-sec03 h3{
	text-align: center;
	font-size: 60px;
	font-weight:800;
}
#sub-sec02 h3 span{
	color:#1f6b31;
}
#sub-sec02 hr,
#sub-sec03 hr{
	width: 100px;
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 100px;
	height: 3px;
	background:#000;
	border:0;
}

.om li{
	width: 60%;
	position:relative;
	margin: 0 20%;
	background: #aaa;
	margin-bottom: 120px;
	margin-top:80px;
	padding: 20px;
	text-align: center;
	border-radius: 20px;
}
.om li img{
	position: absolute;
	right: -50px;
	bottom:-20px;
}
.om li h4{
	font-size: 24px;
	line-height: 40px;
}
#sub-sec02 .om li{
	background:#c7f4da77;
}
#sub-sec02 .om li h4{
	color:#1f6b31;
	margin-bottom:0;
}
#sub-sec03 .om li h4{
	color:#002e3e;
	margin-bottom:0;
}
#sub-sec03 .om li p{
	font-size: 18px;
	margin-top: 10px;
	color:#0b7da6;
}
#sub-sec03 .om li{
	background:#dae8ff77;
}
#sub-sec02 > img{
	position:absolute;
	bottom:0;
	left:20%;
	z-index:100;
}
#sub-sec03 > img{
	position:absolute;
	bottom:0;
	left:70%;
}
#sub-sec03 .om li img{
	left:-20px;
}
#sub-sec03 h4{
	text-align: center;
	font-size: 30px;
}
#sub-sec011{
	background:#f7f7f7;
}
#sub-sec04{
	background:url(images/subm10.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	padding: 100px 0px;

}
#sub-sec04 h3{
	text-align:center;
	font-size: 48px;
	color:#fff;
}
#sub-sec04 h3 b{
	color:#FFF95A;
}
.input-1{
	width: 500px;
	margin: 0 auto;
}
.input-1 input[type=text],
.input-1 input[type=number]{
	width: 100%;
	height: 50px;
	border-radius: 10px;
	border:0;
}
.fom-fu{
	padding: 10px;
	position:relative;
	overflow:hidden;
}
.inps{
	float:left;
	width:33.3%;
	padding: 10px;
}
.inpp{
	float:left;
	width: 50%;
	padding: 10px;
}
.inp{
	width:100%;
	padding: 10px;
	margin-top: 0px;
}
.fom1 h5{
	font-size: 16px;
	padding: 0 20px;
	color:#fff;
}
#footer-area{
	background:#F8F8F8;
	padding: 40px;
}
.footer-bs{
	display:flex;
}
.input-1 input[type=submit]{
	margin: 0 auto;
	width:90%;
}
#address-btn{
	width: 100%;

}
.chexk{
	padding: 20px;
	color:#fff;
}
.chexk span{
	margin-left: 20px;
}
.ckexk .btn2{
	display:inline;
}
.chexk input[type=checkbox]{
	width: 20px;
	height: 20px;
	vertical-align:middle;
}
#sub-sec05{
	padding: 100px 0px;
}
#sub-sec05 h3{
	text-align: center;
	font-size: 48px;
}
.opsb{
	margin-top: 80px;
	margin-bottom: 80px;
}
.opsb .content{
	display: flex;
	width: 100%;
	background:#f8f8f8;
	padding: 10px;
	border-radius: 20px;
	margin: 10px 0px;
}
.opsb .content .bsd{
	width: 10%;
	text-align: center;
	background:#2f959f;
	color:#Fff;
	height: 40px;
	line-height: 40px;
	border-radius: 10px;
}

.opsb .content .on{
	background:#ff9900;
}

.opsb .content .title{
	width: 70%;
	padding: 0 10px;
	font-size: 18px;
	height: 40px;
	line-height: 40px;
	font-weight:800;
}
.opsb .content .store-name{
	width: 20%;
	font-size: 18px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}
#bottom-area-btn{
	position: fixed;
	right: 50px;
	bottom: 50px;
	width: 130px;
	height: 130px;
	z-index:1000;
	display:block;
	box-shadow: 0px 0px 100px rgba(0,0,0,0.3);
	border-radius: 100px;
	cursor:pointer;
	animation-name:ani1;
	animation-iteration-count:infinite;
	animation-duration:1s;
}
.input-1 input[type=submit],
#address-btn{
	display: block;
	height: 50px;
	border-radius:15px;
	font-size:18px;
	color:#fff;
	background:#2f959f;
	border:0;
}
#footer-logo{
	width: 100px;
	margin-right: 40px;
}
.footer-copy{
	line-height:24px;
	font-size:14px;
	color:#aaa;
}
#sub-sec04 h3 span{
	position: relative;

}
#sub-sec04 h3 span:before{
	width: 6px;
	height: 6px;
	display: block;
	content:'';
	position: absolute;
	background:#fff95a;
	left:20px;
	top:0;
	border-radius: 10px;
}
#sub-sec04 h3 span:after{
	width: 6px;
	height: 6px;
	display: block;
	content:'';
	position: absolute;
	background:#fff95a;
	right:20px;
	top:0;
	border-radius: 10px;
}
.btn2{
	position: absolute;
	display: inline-block;
	padding: 5px 20px;
	border-radius: 10px;
	vertical-align:middle;
	margin-left:20px;
	background:#2f959f;
	cursor:pointer;

}
.view-bx{
	display:none;
	width: 800px;
	margin: 0 auto;
	background:#fff;
	position:fixed;
	top: 100px;
	left:50%;
	transform:translate(-50%,0);
	padding: 30px;
	border-radius: 30px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
	z-index:10000;
}
#vert-b{
	height: 400px;
	overflow-y:scroll;
}
#vert-b p{
	font-size:14px;
	line-height: 22px;
}
#close-btn{
	width: 200px;
	display:block;
	margin:0 auto;
	text-align: center;
	margin-top: 20px;
	height: 40px;
	line-height: 40px;
	background:#000;
	color:#fff;
	border-radius: 30px;
	cursor:pointer;
}
@media all and (max-width:1280px){
	.page-w{
		width: 100%;
		padding: 0 20px;
	}
}
@media all and (max-width:768px){
	.page-w{
		width: 100%;
		padding: 0 20px;
	}
	.img-ul ul{
		display: block;
	}
	.img-ul ul li{
		width: 100%;
		margin:0;
		margin:30px 0px;
	}
	.sub-m-sec1 ul{
		display:block;
	}
	.sub-m-sec1 ul li{
		width: 100%;
	}
	#sub01-img{
		left:60;
		width: 200px;
		height:auto;
	}
	#sub-sec02 h3,
    #sub-sec03 h3{
		font-size: 36px;
	}
	.om li{
		width: 90%;
		margin:0 5%;
		margin-bottom: 50px;
	}
	.om li img{
		width: 100px;
	}
	#sub-sec02 > img{
		width:150px;
		left:-20px;
	}
	#sub-sec03 > img{
		width:150px;
		left:80%;
		z-index:1000;
	}
	#sub-sec03 h4{
		font-size:20px;
		margin-bottom: 30px;
	}
	.sub-m-sec1 > ul > li.cont#cont2{
		text-align:left;
	}
	.sub-m-sec1 > ul > li.cont#cont2 hr{
		left:0;
	}
	.sub-m-sec1 ul li.thumb img{
		height: 100%;
		width:auto;
	}
	.view-bx{
		width: 94%;
		padding: 20px;
	}
	#vert-b{
		height: 300px;
	}
}
@media all and (max-width:480px){
	.top-phrase h3{
		font-size: 28px;
	}
	.top-phrase{
		padding-top: 120px;
		margin-bottom: 50px;
	}
	#sub-top1{
		height: 600px;
		background-position:60%;
	}
	#topbtn{
		width: 100%;
		text-align:center;
	}
	#sub-sec01 h2{
		font-size: 30px;
	}
	#sub-sec01 h3{
		font-size: 28px;
		margin-top: 50px;
	}
	#sub-sec01 p{
		font-size: 18px;
	}
	.sub-m-sec1 ul li h4{
		font-size: 24px;
	}
	.sub-m-sec1 > ul > li.cont{
		padding: 20px;
	}
	.sub-m-sec1 ul.ms1 li{
		font-size:16px;
	}
	#sub-sec02 h3, #sub-sec03 h3{
		font-size: 24px;
	}
	.om li h4{
	    font-size:18px;
	}
	.om li img{
		width: 70px;
		top:-40px;
		right:-20px;
	}
	#sub-sec02 > img{
		width: 90px;
		left:0;
	}
	#sub-sec04 h3{
		font-size: 24px;
	}
	#sub-sec04 h3 span:before{
		left:5px;
		top:-4px;
	}
	#sub-sec04 h3 span:after{
		right:5px;
		top:-4px;
	}
	.input-1{
		width: 100%;
	}
	.sub-m-sec1 ul li.thumb{
		height: 300px;
	}
	#sub-sec05 h3{
		font-size: 28px;
	}
	.opsb .content .bsd{
		font-size: 12px;
		width: 20%;
	}
	.opsb .content .title,
	.opsb .content .store-name{
		font-size: 14px;
	}
	#footer-area{
		padding:20px 0px;
	}
	#footer-logo{
		width: 70px;
		margin-bottom: 20px;
	}
	.footer-bs{
		display: block;
	}
	.footer-copy{
		width: 100%;
	}
	.footer-copy ul li{
		font-size: 14px;
	}
	#bottom-area-btn{
		width: 80px;
		height: 80px;
		right: 20px;
	}
	#sub-sec03 > img{
		left:80%;
		width: 95px;
	}
	.chexk span{
		font-size: 14px;
	}
}
@keyframes ani1{
	0%{
		bottom:50px;
	}
	50%{
		bottom:70px;
	}
	100%{
		bottom:50px;
	}
}