

@import url( "http://fonts.googleapis.com/earlyaccess/notosanskr.css" );
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

.clearfix:before,
.clearfix:after{
	
	content:"";
	display:table;
	
}

.clearfix:after{
	clear:both;
}

.clearfix {
	zoom:1;
}

.blackFilm {
	width:100%;
	height:100%;
	background-color:black;
	opacity:0.6;
	position:absolute;
	top:0;
	left:0;
}

.blackFilm ~ div {
	position:relative;
}


.vrtCent {
	/* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

* { margin:0; padding:0; }
html {}
body {font-family: "Noto Sans KR", sans-serif;}
ul { list-style:none;}
a {text-decoration:none; color:inherit;}
img {border:0px;}
ul, ol, p{margin-bottom:0;}



#wrapper {
	width:100%;
	height:100%;
	max-width:768px;
	margin:auto;
	overflow-x:hidden;
	overflow-y:scroll;
	position:relative;
	
	background:url("../img/sky02.jpg") no-repeat center;
	background-size:cover;
}


#wrapper.inputWrapper {
	background:url("../img/sky01.jpg") no-repeat center !important;
}

#wrapper.resultWrapper {
	background:url("../img/sky01.jpg") no-repeat center !important;
}


div[data-role="page"] {
	position:relative !important;
	width:100% !important;
	background-color:rgba(0,0,0,0);
}


/* @media all and (min-width:992px) { */
/* 	#wrapper { */
/* 		width:992px; */
/* 		//max-width:991px; */
/* 		height:100%; */
/* 		margin:0 auto; */
/* 	} */
/* } */


#loading2 {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:white;
	z-index:9999999;
	text-align:center;
}

#loading2 > img {
	
}

div.headerSec {
	border:0px;
	//width:100%;
	height:55px;
	background-color:rgba(0, 0, 0, 0) !important;
	position:absolute;
}

div.headerSec.stickingRoof {
	position:fixed !important;
	top: -55px;
	//border-bottom:1px solid #ddd !important;
	background-color:rgba(0,0,0,0.5) !important;
	z-index:9999999;
}


div.mNavBTN {
	display:block !important;
	height:55px; 
	padding:18px 17px; 
	box-sizing:border-box;
	position:absolute;
	z-index:9999;
	cursor:pointer;
}

div.mNavBTN > span.barTRIO {
	 display:block;
	 width:25px;
	 height:2px;
	 background-color:white;
}
div.mNavBTN > span:nth-child(1){margin-bottom:6px;}
div.mNavBTN > span:nth-child(2){margin-bottom:6px;}
div.mNavBTN > span:nth-child(3){}



div.mobNav {
	 display:block !important;
	 width:265px;
	 height:100%;
	 background-color:rgba(255, 255, 255, 1);
	
	 position:fixed !important;
	 top:0;
	 left:-296px;
	 z-index:99999;
	 
	 transition:all 0.2s ease-in-out;
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
}

div.mobNav.on {
	transform:translateX(296px);
}

.xbtn {
	width:31px;
	height:31px;
	position:relative;
	right:-265px;
	cursor:pointer;
}


.mNavTop {
	text-align:center;
	padding:40px 0;
}

.mNavCS {
	padding:30px;
	text-align:center;
	background-color:#eeeeee;
	
}

.underLine {
	width:30px;
	height:1px;
	background-color:#b1b1b1;
	margin:20px auto;
}

.csTime {
	font-size:14px;
	font-weight:200;
	color:#848484;
}

.phoneNum {
	font-size:17px;
	font-weight:300;
	margin-top:15px;
}

.email {
	font-size:17px;
	font-weight:300;
	margin-bottom:15px;
}

ul.company li {
	font-size:13px;
	font-weight:200;
}

.mNavFoot {
	background-color:#d2d2d2;
	height:100%;
	position:relative;
}

.mNavFoot p {
	font-size:11px;
	font-weight:200;
	text-align:center;
	padding-top:20px;
}

div.mNavBack {
	/*추가*/
	 width:100%;
	 height:100%;
	 background-color:rgba(0, 0, 0, 0.8);
	 position:fixed;
	 top:0;
	 left:0;
	 z-index:998;
	 //opacity:0;
	 display:none;
	
	
}


.lastBtn {
	width:100px;
	height:100px;
	border:1px solid white;
	margin:20px auto;
	text-align:center;
	border-radius:50%;
	
	
	

}

.lastBtn a {
	color:white !important;
	font-weight:400;
	width:100%;
	height:100%;
	
		/* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
	
}


div.footer {
	background-color:rgba(0, 0, 0, 0) !important;
	text-shadow:none !important;
}

div.footer p {
	text-shadow:none !important;
	color:white;
	font-size:13px;
	font-weight:100;
	text-align:center;
	opacity:0.7;
	margin-bottom:3px;
}

.pageTitle {
	text-align:center;
	font-size:30px;
	padding:30px 0;
	color:white;
}


#loading2 {
	background:url("../img/sky01.jpg") no-repeat center;
	background-size:cover;
}

#loading2 > #loadPageHead {
	display:none;
	position:absolute;
	width:100%;
	text-align:center;
	top:-75px;
}

#loading2 > #loadPageLogo {
	width:100%;
	height:100%;
	text-align:center;
	
	/* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
	
}


#loading2 > #loadPageLogo > img {
	//margin-left:30px;
}


/*메인페이지*/

#main {
	
	//background:url("../img/sky02.jpg") no-repeat center fixed;
	//background-size:cover;
	
	text-shadow:none;
}



div#intro {
	width:80%;
	margin:0 auto;
	padding:30px 20px;
	padding-top:120px;
	position:relative;
}

div#intro > div#hi {
	width:100%;
	height:30px;
	background:url("../img/hi.png") no-repeat center;
	margin-bottom:50px;
	
}

div#intro > p {
	font-size:15px;
	font-weight:200;
	font-family:'Nanum Myeongjo';
	line-height:24px;
	margin-bottom:20px;
	color:white;
	opacity:0.9;
	
	text-align:center;
	
	
}


div#startBtn {
	
}


#sub {
	//background:url("../img/sky02.jpg") no-repeat center fixed;
	//background-size:cover;
	
	text-shadow:none;
}

div#caution {
	width:80%;
	margin:0 auto;
	padding:30px 20px;
	
	color:white;
}

div#caution > p {
	width:90px;
	padding-top:5px;
	margin:0 auto;
	
	text-align:center;
	font-size:20px;
	margin-bottom:20px;
	
	border-top:1px solid white;
}

div#caution > ul {}

div#caution > ul > li {
	margin-bottom:12px;
	font-size:13px;
	font-weight:100;
	line-height:20px;
}

#pay {
	box-sizing:border-box;
	background:url("../img/won.png") no-repeat center 20px;
}

#pay a {
	padding-top:10px;
}


/*결제페이지*/


#payChoice {
	//background:url("../img/sky02.jpg") no-repeat center fixed;
	//background-size:cover;
	text-shadow:none;
}

#payChoice > .blackFilm {opacity:0.3;}


.payText {
	text-align:center;
	color:white;
	padding-top:100px;
}

.payIs {
	color:white;
	width:80%;
	max-width:430px;
	margin:auto;
	text-align:center;
	font-weight:300;
}

#manwon {
	color:white;
	font-size:55px;
	letter-spacing:10px;
	font-weight:100;
}




#payList {
	position:relative;
	padding:60px 10px 30px;
}

#payList > p.payTitle {
	color:white;
	font-size:30px;
	margin-bottom:10px;
}

p.payNotice {
	color:white;
	font-weight:100;
	margin-bottom:30px;
	padding-left:20px;
	
}

#payList ul {
	width:100%;
}

#payList ul > li {
	width:48%;
	height:40%;
	float:left;
	position:relative;
	
	box-sizing:border-box;
	
	border:1px solid white;
	border-radius:10px;
	cursor:pointer;
	
	margin-bottom:15px;
	
	color:white;
	text-align:center;

	
}

#payList ul > li > img {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}


#payList ul > li > span {
	display:block;
	width:100%;
	position:absolute;
	top:80%;
	
	text-align:center;
	
	font-size:12px;
	
}

#payList ul > li:nth-child(2n+1) {
	margin-right:4%;
}


#manwon {
	
	width:90%;
	margin:0 auto;
	margin-top:80px;
	padding-bottom:10px;
	text-align:center;
	border-bottom:1px solid white;
}

#manwon > img {
	margin-right:20px;
}


#gohipass {
/* 	position:absolute; */
/* 	top:90px; */
/* 	right:20px; */
	padding:15px;
/* 	width:150px; */
/* 	height:50px; */
	border:1px solid white;
	border-radius:8px;
	text-align:center;
} 

#gohipass a {
	color:white;
	font-weight:200;
}


#inputTelnum {
	width:80%;
	margin:auto;
	margin-top:100px;
}

#inputTelnum p {
	color:white;
	text-shadow:none;
	text-align:center;
	padding:20px;
}

#inputTelnum form {
	
}

#inputBox {
}

#inputTelnum div.ui-input-text {
	float:left;
	width:30%;
	box-sizing:border-box;
}

#inputTelnum span {
	
	display:block;
	position:relative;
	float:left;
	width:5%;
	height:100%;
	text-align:center;
	top:10px;
	
	box-sizing:border-box;
}

#inputTelnum input {
	box-sizing:border-box;
}

#inputTelnum button {
	width:100px;
	height:100px;
	background-color:transparent;
	border-radius:50%;
	margin:30px auto;
	color:white;
	text-shadow:none;
}



/*괘뽑기 페이지*/

div#inputPage{
	//background:url("../img/sky01.jpg") no-repeat center fixed;
	//background-size:cover;
	text-shadow:none;
}

div#auspices {
	width:80%;
	margin:0 auto;
	padding:30px 20px;
}




div#auspices > p#auspicesTit {
	width:100%;
	height:100px;
	text-align:center;
	font-size:20px;
	margin-bottom:20px;
	padding-top:30px;
	
	color:white;
	
	background:url("../img/auspices.png") no-repeat center top;
}

div#auspices > p#gramMake {
	width:100%;
	text-align:center;
	font-size:20px;
	margin-bottom:20px;
	color:white;
}


div#auspices p.help {
	color:white;
	font-size:14px;
	font-weight:100;
	text-align:center;
	padding:5px;
	//padding-left:30px;
	
}

div#auspices p.helpTit {
	font-size:18px;
	font-weight:400;
}


div#auspices > ul > li {
	
	margin-bottom:50px;
	color:white;
	
	text-align:center;
}

div#auspices > ul > li > span {
	font-size:30px;
	font-weight:300;
}

div#auspices > ul > li > p {
	font-size:14px;
	font-weight:100;
	line-height:30px;
}


div#timeCount {
	width:100%;
	font-size:45px;
	text-align:center;
	margin-bottom:20px;
	padding:10px;
	box-sizing:border-box;
	
	color:white;
	letter-spacing:7px;
	
	border:1px solid white;
	border-radius:15px;
	
}

#randomChoice {
	width:100%;
	height:300px;
	position:relative;
	margin-top:30px;
	text-align:center;
}

#randomChoice > span {
	font-size:40px;
	color:white;
}

#randomChoice img {
	
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	
	animation:dora 4s linear;
	animation-iteration-count:infinite;
	
	-webkit-animation:dora 4s linear;
	-webkit-animation-iteration-count:infinite;
	-moz-animation:dora 4s linear;
	-moz-animation-iteration-count:infinite;
}

@keyframes dora {
	0%{
		transform:rotateZ(0deg);
		-webkit-transform:rotateZ(0deg);
		-moz-transform:rotateZ(0deg);
	}
	100%{
		transform:rotateZ(360deg);
		-webkit-transform:rotateZ(360deg);
		-moz-transform:rotateZ(360deg);
	}
}


#resultBtn {
	  width: 170px;
	  height: 170px;
	  line-height: 150px;
	  margin: 60px auto;
	  position: relative;
	  box-sizing: border-box;
	  text-align: center;
	  z-index: 0;
	  text-transform: uppercase;
	  background-color:transparent;
	  
	  color:white;
	  border:0px !important;
	  box-shadow:none !important;
	  border-radius:50%;
}


#resultBtn:before,
#resultBtn:after {
  opacity: 0;
  box-sizing: border-box;
  content: "\0020";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  border: 5px solid #fff;
  box-shadow: 0 0 50px #fff, inset 0 0 50px #fff;
}

#resultBtn:after {
  z-index: 1;
  -webkit-animation: gogoloader 2s infinite 1s;
}

#resultBtn:before {
  z-index: 2;
  -webkit-animation: gogoloader 2s infinite;
}


/*불시착 페이지*/

#wrongPage {
	//background:url("../img/sky01.jpg") no-repeat center fixed;
	//background-size:cover;
	text-shadow:none;
	
	height:500px;
	
}




/*결과페이지*/

#resultLoading {
	width:100%;
	height:100%;
	background-color:black;
	position:fixed;
	top:0;
	left:0;
	z-index:9999999999;
	
	color: #ccc;
	font-size: 14px;
	
}

.loader {
  width: 170px;
  height: 170px;
  line-height: 170px;
  margin: 100px auto;
  position: relative;
  box-sizing: border-box;
  text-align: center;
  z-index: 0;
  text-transform: uppercase;
}

.loader:before,
.loader:after {
  opacity: 0;
  box-sizing: border-box;
  content: "\0020";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  border: 5px solid #fff;
  box-shadow: 0 0 50px #fff, inset 0 0 50px #fff;
}

.loader:after {
  z-index: 1;
  -webkit-animation: gogoloader 2s infinite 1s;
}

.loader:before {
  z-index: 2;
  -webkit-animation: gogoloader 2s infinite;
}

@-webkit-keyframes gogoloader {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}



#resultPage {
	//background:url("../img/sky01.jpg") no-repeat center fixed;
	//background-size:cover;
	text-shadow:none;
}

#resultTitle {
	height:80px;
	background:url("../img/trigramCircle.png") no-repeat center;
	background-size:contain;
	font-family:'Nanum Myeongjo';
	font-size:20px;
	
	position:relative;
	top:-80px;
	
	padding-top:50px;
	margin-bottom:30px;
}

.gramSec {
	margin-bottom:30px;
	float:left;
	width:50%;
}

.gramSec p {
	text-align:center;
	color:white;
	font-family:'Nanum Myeongjo';
	margin-top:15px;
}


div.gramImg {
	width:120px;
	margin:0 auto;
}


.topGramImg > ul > li {
	margin-bottom:7px;
}

.topGramImg > ul > li > span {
	display:block;
	float:left;
}


.bar {
	width:46%;
	height:13px;
	background-color:white;
}

.space {
	width:8%;
	height:13px;
}


#arrow {
	display:none;
	position:absolute;
	top:255px;
	left:0;
	right:0;
	margin:auto;
	text-align:center;
}

p#fortuneContent {
		
	width:90%;
	min-height:100px;
	
	text-align:center;
	margin:auto;
	margin-top:240px;
	margin-bottom:50px;
	padding:20px;
	box-sizing:border-box;

	
	color:white;
	
	border:1px solid white;
	border-radius:10px;
	
	font-family:'Nanum Myeongjo';
	font-weight:100;
	font-size:15px;
	line-height:30px;
}

p#mainbackBtn {

	margin-top:100px;
	margin-bottom:70px;
	
	
}

p#mainbackBtn > a {
	color:white;
}

.footer {
	font-size:14px;
	font-weight:400 !important;
	padding:30px;
	padding-top:0;
}


div#rightGo {
	text-align:center;
	border-bottom:1px solid white;
	padding:20px;
	margin-bottom:30px;
}

div#rightGo > a {
	color:white;
	font-size:22px;
	display:block;
	width:100%;
	height:100%;
} 


/*로딩 애니메이션*/

.demo {
  width: 150px;
  height: 152px;
  border-radius: 100%;
  position: absolute;
  //top: 38%;
  //left: calc(50% - 0px);
  top:0;bottom:0;left:0;right:0;
  margin:auto;
  //left:30px;
  bottom:70px;
}

.circle {
  width: 100%;
  height: 100%;
  position: absolute;
}
.circle .inner {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 5px solid rgba(255, 255, 255, 0.7);
  border-right: none;
  border-top: none;
  backgroudn-clip: padding;
  box-shadow: inset 0px 0px 10px rgba(0, 255, 170, 0.15);
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.circle:nth-of-type(0) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.circle:nth-of-type(0) .inner {
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}

.circle:nth-of-type(1) {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
}
.circle:nth-of-type(1) .inner {
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}

.circle:nth-of-type(2) {
  -webkit-transform: rotate(140deg);
          transform: rotate(140deg);
}
.circle:nth-of-type(2) .inner {
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}

.demo {
  -webkit-animation: spin 5s infinite linear;
          animation: spin 5s infinite linear;
}

