/*----- box-sizing -----*/
*{
	box-sizing:border-box;
}

/*----- imges -----*/
img,
svg,
input[type="image"]{
max-width: 100%;
margin:0 auto;
height: auto;
width /***/:auto;
transition:.3s;
display: block;
}
input[type="image"]:hover{
	opacity:.7;
}
.imgCircle img{
	display: inline-block;
	border-radius: 50%;
	height: 100%;
	width: 100%;
}
/*----- flexbox -----*/
.flexbox{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.flexboxCenter{
	display: flex;
	flex-flow: row wrap;
	justify-content:  space-around;
}
.flexbox:after{
  content:"";
  display: block;
  width:31%;
}
.flex1col{
	flex-basis:100%;
	margin-bottom:3%;
}
.flex2col,.flex2col_lock{
	flex-basis: 49%;
	margin-bottom:3%;
}
.flex3col{
	flex-basis: 32.5%;
	margin-bottom:3%;
}
.flex4col{
	flex-basis: 24%;
	margin-bottom:3%;
}
.flex5col{
	flex-basis: 19%;
	margin-bottom:3%;
}
.flex6col{
	flex-basis: 16%;
	margin-bottom:3%;
}

/*----- float -----*/
.floatRight{ float: right; }
.floatLeft{ float: left; }
.imgCenter { display: block; margin:0 auto; }
.imgLeft{ float: left; margin: 0 5% 0 0; max-width:40%;}
.imgRight{ float: right; margin: 0 0 1em 1em; max-width:40%;}

/*----- text-align -----*/
.alignRight { text-align: right; }
.alignLeft { text-align: left; }
.alignCenter,.alignCenter p{ text-align: center; }

/*----- width -----*/
.mw30{max-width: 30%;}
.mw50{max-width: 50%;}
.mw80{max-width: 80%;}
.w8em{ width: 8em !important; }
.w20 { width: 20%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }
.w10em { width: 10em; }
.w20em { width: 20em !important; }

/*----- margin -----*/
.ma0 { margin: 0%; }
.ma-8{margin: -8%}
.ma1 { margin: 1%; }
.ma2 { margin: 2%; }
.ma3 { margin: 3%; }
.ma5 { margin: 5%; }
.ma10 { margin: 10%; }
.ma15 { margin: 15%; }

.mt-3{ margin-top: -3em;}
.mt1 { margin-top: 1%; }
.mt2 { margin-top: 2%; }
.mt3 { margin-top: 3%; }
.mt5 { margin-top: 5%; }
.mt10 { margin-top: 10%; }
.mt15 { margin-top: 15%; }
.mt20 { margin-top: 20%; }
.mt30 { margin-top: 30%; }

.mb0 { margin-bottom: 0 !important; }
.mb1 { margin-bottom: 1%; }
.mb2 { margin-bottom: 2%; }
.mb3 { margin-bottom: 3%; }
.mb5 { margin-bottom: 5%; }
.mb10 { margin-bottom: 10%; }
.mb15 { margin-bottom: 15%; }
.mb20 { margin-bottom: 20%; }
.mb25 { margin-bottom: 25%; }
.mb30 { margin-bottom: 30%; }

.ml1 { margin-left: 1%; }
.ml2 { margin-left: 2%; }
.ml3 { margin-left: 3%; }
.ml5 { margin-left: 5%; }
.ml10 { margin-left: 10%; }
.ml15 { margin-left: 15%; }
.ml20 { margin-left: 20%; }
.ml30 { margin-left: 30%; }

.mr1 { margin-right: 1%; }
.mr2 { margin-right: 2%; }
.mr3 { margin-right: 3%; }
.mr5 { margin-right: 5%; }
.mr10 { margin-right: 10%; }
.mr15 { margin-right: 15%; }
.mr20 { margin-right: 20%; }
.mr30 { margin-right: 30%; }


/*----- padding -----*/
.pa1 { padding: 1%; }
.pa2 { padding: 2%; }
.pa3 { padding: 3% !important; }
.pa5 { padding: 5% !important; }
.pa10 { padding: 10%; }
.pa15 { padding: 15%; }

.pt1 { padding-top: 1%; }
.pt2 { padding-top: 2%; }
.pt3 { padding-top: 3%; }
.pt5 { padding-top: 5%; }
.pt10 { padding-top: 10%; }
.pt15 { padding-top: 15%; }
.pt20 { padding-top: 20%; }
.pt30 { padding-top: 30%; }

.pb1 { padding-bottom: 1%; }
.pb2 { padding-bottom: 2%; }
.pb3 { padding-bottom: 3%; }
.pb5 { padding-bottom: 5%; }
.pb10 { padding-bottom: 10%; }
.pb15 { padding-bottom: 15%; }
.pb20 { padding-bottom: 20%; }
.pb30 { padding-bottom: 30%; }

.pl1 { padding-left: 1%; }
.pl2 { padding-left: 2%; }
.pl3 { padding-left: 3%; }
.pl5 { padding-left: 5%; }
.pl10 { padding-left: 10%; }
.pl15 { padding-left: 15%; }
.pl20 { padding-left: 20%; }
.pl30 { padding-left: 30%; }

.pr1 { padding-right: 1%; }
.pr2 { padding-right: 2%; }
.pr3 { padding-right: 3%; }
.pr5 { padding-right: 5%; }
.pr10 { padding-right: 10%; }
.pr15 { padding-right: 15%; }
.pr20 { padding-right: 20%; }
.pr30 { padding-right: 30%; }

/*----- line-height ------*/
.lhSS{ line-height: 1; }
.lhS{ line-height: 1.3; }
.lhM{ line-height: 1.5; }
.lhL{ line-height: 1.75; }

/*----- font-weight ------*/
.fwNormal{ font-weight:normal; }
.fwBold{ font-weight:bold; }
.fwBolder{ font-weight:bolder;}

/*----- font-family ------*/
.ffSns-serif { font-family: sans-serif; }
.ffSelif{ font-family: serif; }

/*----- font-size -----*/
.fSS{ font-size:.75%; }
.fS{ font-size:90%; }
.fL{ font-size:125%; }
.fL2{ font-size:150%; }
.fL3{ font-size:200%; }
.fL3{ font-size:250%; }
.fL4{ font-size:300%; }

/*----- color -----*/
.whitet{ color: #FFF; }
.lightGray{ color: #ccc; }
.gray{ color: #999; }
.charcoalGray{ color: #666; }
.black{ color: #000; }
.red{ color: #FF5353; }
.blue{ color: #00A0E9; }
.green{ color: #96c800; }
.yellow{ color: #FF3 !important; }
.orange{ color: #fc6721 !important; }

.redL{ color: #ff2894; font-size:125%; }
.redL2{ color: #ff2894; font-size:150%; }
.redL3{ color: #ff2894; font-size:200%; }
.redL4{ color: #ff2894; font-size:300%; }
.redUL{  color: #ff2894;  border-bottom:1px solid #ff2894; }
.UL{ border-bottom:1px solid #333;}

/*----- background-color -----*/
.bgYellow{background: linear-gradient(transparent 60%, #ff6 60%);}
.bgYellowL{background: linear-gradient(transparent 60%, #ff6 60%); font-size:1.25em;}
.bgYellowL2{background: linear-gradient(transparent 60%, #ff6 60%); font-size:1.5em;}
.bgYellowL3{background: linear-gradient(transparent 60%, #ff6 60%); font-size:2em;}
.bgYellowL4{background: linear-gradient(transparent 60%, #ff6 60%); font-size:3em;}

/*----- border-radius ------*/
.br5{ border-radius: 10px; }
.br10{ border-radius: 10px; }


/**----- text-indent -----*/
.tIndent{ text-indent:-1em; margin:0 0 .75em 1em; letter-spacing:0; line-height: 1.5; }


/*----- link -----*/
.lo{ transition: .3s; display: inline-block; }
.lo:hover{ opacity: .5; }

/*----- youtube -----*/
.youtube {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.youtube iframe,  
.youtube object,  
.youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dspBlock{ display:block; }
.dspInlineBlock{ display: inline-block !important; }
.clear{ clear:both;}
.ofHidden{ overflow: hidden; }
.border{ border:#ccc 1px solid;}
.boxshadw{ box-shadow:3px 3px 5px #f4f4f4;}
.ofHidden{overflow: hidden}
.SPonly,.MDonly{ display: none;}

@media screen and (max-width:1024px){
	.MDonly{ display: block;}
}
@media screen and (max-width:768px){
	

}
@media screen and (max-width:640px){
	.imgRight,.imgLeft{ float: none; margin: 0 auto 3%; max-width:100%;}
	.bgYellowL,.redL,.fL{font-size:1.05em;}
	.bgYellowL2,.redL2,.fL2{font-size:1.15em;}
	.bgYellowL3,.redL3,.fL3{font-size:1.25em;}
	.bgYellowL4,.redL4,.fL4{font-size:1.5em;}
	.flex2col{ flex-basis:100%; }
	.flex3col{ flex-basis:100%; padding:0 10% 5%; }
	.flex4col{ flex-basis:49%; }
	.flex5col{ flex-basis:32%; }
	.flex6col{ flex-basis:32%; }
	.flex30{	flex-basis: 100%;}
	.flex70{	flex-basis: 100%;}
	.mw30{max-width: %;}
	.mw80{max-width: 100%;}
	.SPonly{ display: block;}
	.PConly{display: none;}
}