@charset "UTF-8";
/** @AMB common  V 0.9.9 | @AMB Design -  @mo @shjoo @lhjoo **/

/* **************** ************************************************ **************** */
/* **************** loadingBox **************** */
.loadingBox.insidePage {position:relative; z-index:98; min-height:150px;}
.loadingBox {display:block; position:fixed; width:100%; height:100%; z-index:9999; top:0; left:0; }
.loadingBox .loadingBg {display:block; position:absolute; width:100%; height:100%; background:#000; opacity:0.7;}
.loadingBox.insidePage .loadingBg {display:none;}

/* stySquare **************** */
.loadingBox.stySquare .loadingImg {display:block; position:absolute; width:50px; height:50px; top:50%; left:50%; margin-left:-25px; margin-top:-25px; text-align:center;
	 -webkit-animation:loadAniSquare 1.5s infinite ease-in-out;
	animation: loadAniSquare 1.5s infinite ease-in-out;
}
.loadingBox.stySquare .loadingImg > div       {background:#28b0ef; height:16px;  width:16px; margin:4px; border-radius:50%; display: inline-block; float:left;  opacity:;}
.loadingBox.stySquare .loadingImg > div.img01 {opacity:1.0;}
.loadingBox.stySquare .loadingImg > div.img02 {opacity:0.8;}
.loadingBox.stySquare .loadingImg > div.img03 {opacity:0.6;}
.loadingBox.stySquare .loadingImg > div.img04 {opacity:0.4;}
.loadingBox.stySquare .loadingImg > div.img05,
.loadingBox.stySquare .loadingImg > div.img06,
.loadingBox.stySquare .loadingImg > div.img07 {display:none;}

@-webkit-keyframes loadAniSquare {
	0%   {-webkit-transform: rotate(0deg);}  
	100% {-webkit-transform: rotate(360deg);}
}
@keyframes loadAniSquare {
	0%   {transform: rotate(0deg);}  
	100% {transform: rotate(360deg);}
}

/* styBar **************** */
.loadingBox.styBar .loadingImg    {display:block; position:absolute; width:50px; height:40px; top:50%; left:50%; margin-left:-25px; margin-top:-20px; text-align:center; overflow:hidden;}
.loadingBox.styBar .loadingImg > div       {background:#28b0ef; height:100%; width:6px; border-radius:3px; display:inline-block; float:left; margin:0 5px 0 0; box-shadow:0 10px 10px rgba(0,0,0,0.2);
	-webkit-animation:loadiAniBar 0.6s infinite ease-in-out;
	animation: loadiAniBar 0.6s infinite ease-in-out;
}
.loadingBox.styBar .loadingImg > div.img01 {-webkit-animation-delay:0s;     animation-delay:0s;}
.loadingBox.styBar .loadingImg > div.img02 {-webkit-animation-delay:-0.55s; animation-delay:-0.55s;}
.loadingBox.styBar .loadingImg > div.img03 {-webkit-animation-delay:-0.5s;  animation-delay:-0.5s;}
.loadingBox.styBar .loadingImg > div.img04 {-webkit-animation-delay:-0.45s; animation-delay:-0.45s;}
.loadingBox.styBar .loadingImg > div.img05 {-webkit-animation-delay:-0.4s;  animation-delay:-0.4s; margin-right:0px;}
.loadingBox.styBar .loadingImg > div.img06,
.loadingBox.styBar .loadingImg > div.img07 {display:none;}

@-webkit-keyframes loadiAniBar {
	0%, 40%, 100% { -webkit-transform: scaleY(0.6) }  
	20% { -webkit-transform: scaleY(1.0) }
}
@keyframes loadiAniBar {
	0%, 40%, 100% {transform: scaleY(0.6);}   
	20% {transform: scaleY(1.0);}
}

/* styCircle **************** */
.loadingBox.styCircle .loadingImg    {display:block; position:absolute; width:60px; height:60px; top:50%; left:50%; margin-left:-30px; margin-top:-30px; text-align:center; 
	 -webkit-animation:loadiAniCircle 1.0s infinite linear;
	animation: loadiAniCircle 1.0s infinite linear;
}
.loadingBox.styCircle .loadingImg > div       {position:absolute; height:100%; width:100%; display:block; margin:0 0 0 0;}
.loadingBox.styCircle .loadingImg > div:before{background:#28b0ef; display:inline-block; content:''; width:9px; height:9px; border-radius:100%;}
.loadingBox.styCircle .loadingImg > div.img01 {opacity:0.2; transform: rotate(30deg); -webkit-transform: rotate(30deg);}
.loadingBox.styCircle .loadingImg > div.img02 {opacity:0.4; transform: rotate(60deg); -webkit-transform: rotate(60deg);}
.loadingBox.styCircle .loadingImg > div.img03 {opacity:0.6; transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.loadingBox.styCircle .loadingImg > div.img04 {opacity:0.7; transform: rotate(120deg); -webkit-transform: rotate(120deg);}
.loadingBox.styCircle .loadingImg > div.img05 {opacity:0.8; transform: rotate(150deg); -webkit-transform: rotate(150deg);}
.loadingBox.styCircle .loadingImg > div.img06 {opacity:0.9; transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.loadingBox.styCircle .loadingImg > div.img07 {opacity:1.0; transform: rotate(210deg); -webkit-transform: rotate(210deg);}

@-webkit-keyframes loadiAniCircle {
	0%   {-webkit-transform: rotate(0deg);}  
	100% {-webkit-transform: rotate(360deg);}
}
@keyframes loadiAniCircle {
	0%   {transform: rotate(0deg);}  
	100% {transform: rotate(360deg);}
}

/* styBounce **************** */
.loadingBox.styBounce .loadingImg        {display:block; position:absolute; width:100px; height:20px; top:50%; left:50%; margin-left:-40px; margin-top:-10px; text-align:center; overflow:hidden;}
.loadingBox.styBounce .loadingImg > div  {background:#28b0ef; position:relative; height:16px; width:16px; display:inline-block; margin:0 2px 0 0; border-radius:100%; box-shadow:0 10px 10px rgba(0,0,0,0.2);
	 -webkit-animation:loadAniBounce 1.0s infinite ease-in-out;
	animation: loadAniBounce 1.0s infinite ease-in-out;
}
.loadingBox.styBounce .loadingImg > div.img01 {-webkit-animation-delay:-0.75s; animation-delay:-0.75s;}
.loadingBox.styBounce .loadingImg > div.img02 {-webkit-animation-delay:-0.50s; animation-delay:-0.50s;}
.loadingBox.styBounce .loadingImg > div.img03 {-webkit-animation-delay:-0.25s; animation-delay:-0.25s;}
.loadingBox.styBounce .loadingImg > div.img04 {-webkit-animation-delay:0s; animation-delay:0s;}
.loadingBox.styBounce .loadingImg > div.img05,
.loadingBox.styBounce .loadingImg > div.img06,
.loadingBox.styBounce .loadingImg > div.img07 {display:none;}

@-webkit-keyframes loadAniBounce {
	0%, 80%, 100% { -webkit-transform: scale(0.5); opacity:0.2; }
    40% { -webkit-transform: scale(1.0); opacity:1.0; }
}
@keyframes loadAniBounce {
	0%, 80%, 100% { transform: scale(0.5); opacity:0.2; }
    40% { transform: scale(1.0); opacity:1.0; }
}

/* styFolding **************** */
.loadingBox.styFolding .loadingImg       {display:block; position:absolute; width:46px; height:46px; top:50%; left:50%; margin-left:-25px; margin-top:-25px; text-align:center; overflow:hidden; border-radius:;
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
}
.loadingBox.styFolding .loadingImg > div {position:relative; height:50%; width:50%; display:inline-block; margin:0 0 0 0;  float:left; background:rgba(255,255,255,0.0);}

.loadingBox.styFolding .loadingImg > div:before {content:''; display:block; position:absolute; top:0; left:0; width:97%; height:97%; border-radius:;
	 -webkit-animation:loadAniBounce 2.1s infinite linear both;
	animation: loadAniFolding 2.1s infinite linear both;
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}
.loadingBox.styFolding .loadingImg > div.img01 {opacity:0.6;}
.loadingBox.styFolding .loadingImg > div.img02 {opacity:0.8; -webkit-transform:rotateZ(90deg); transform:rotateZ(90deg);}
.loadingBox.styFolding .loadingImg > div.img04 {opacity:1.0; -webkit-transform:rotateZ(180deg); transform:rotateZ(180deg);}
.loadingBox.styFolding .loadingImg > div.img03 {opacity:0.7; -webkit-transform:rotateZ(270deg); transform:rotateZ(270deg);}

.loadingBox.styFolding .loadingImg > div.img01:before {background:#28b0ef;}
.loadingBox.styFolding .loadingImg > div.img02:before {background:#28b0ef; -webkit-animation-delay:-0.3s; animation-delay: -0.3s;}
.loadingBox.styFolding .loadingImg > div.img04:before {background:#28b0ef; -webkit-animation-delay:-0.6s; animation-delay: -0.6s;}
.loadingBox.styFolding .loadingImg > div.img03:before {background:#28b0ef; -webkit-animation-delay:-0.9s; animation-delay: -0.9s;}

.loadingBox.styFolding .loadingImg > div.img05,
.loadingBox.styFolding .loadingImg > div.img06,
.loadingBox.styFolding .loadingImg > div.img07 {display:none;}

@-webkit-keyframes loadAniFolding {
	0%, 10%   {-webkit-transform:rotateX(-180deg); opacity: 0; background:#000;}
	25%, 75%  {-webkit-transform:rotateX(0deg);    opacity: 1; background:#28b0ef;} 
	90%, 100% {-webkit-transform:rotateY(180deg);  opacity: 0; background:#000;}
}
@keyframes loadAniFolding {
	0%, 10%   {transform:rotateX(-180deg); opacity: 0; background:#000;}
	25%, 75%  {transform:rotateX(0deg);    opacity: 1; background:#28b0ef;} 
	90%, 100% {transform:rotateY(180deg);  opacity: 0; background:#000;}
}