@charset "utf-8";

@font-face{
font-family:"NanumBarunGothic";
    src: url('/fonts/NanumBarunGothic.eot'); 
    src: url('/fonts/NanumBarunGothic.eot') format('embedded-opentype'),
		 url('/fonts/NanumBarunGothic.woff') format('woff');
}

@font-face{
font-family: "NanumBarunGothicBold";
    src: url('/fonts/NanumBarunGothicBold.eot'); 
    src: url('/fonts/NanumBarunGothicBold.eot') format('embedded-opentype'),
		 url('/fonts/NanumBarunGothicBold.woff') format('woff');
}

@font-face{
font-family: "NanumGothicExtraBold";
    src: url('/fonts/NanumGothicExtraBold.eot'); 
    src: url('/fonts/NanumGothicExtraBold.eot') format('embedded-opentype'),
		 url('/fonts/NanumGothicExtraBold.woff') format('woff');
}

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

body {font-family:"NanumBarunGothicBold";}

#header,
#container1,
#container2,
#footer {width:100%;}

.contHeader,
#contents {width:960px;margin:0 auto;position:relative;}

img {width:100%;}
.txtBold {font-family:"NanumGothicExtraBold";font-size:20px;}
.violetBold {
	font-family:"NanumGothicExtraBold";
	color:#b600f2;
	font-size:20px;
	-webkit-text-shadow: 0px 3px 15px #c3c3c3;
	-moz-text-shadow: 0px 3px 15px #c3c3c3;
	-ms-text-shadow: 0px 3px 15px #c3c3c3;
	text-shadow: 0px 3px 15px #c3c3c3;
}

/**********************  header   ************************/

#header {background:url('/image/together/fortune/bg_header.png') repeat-x 0 0;height:420px;padding-top:30px;}


.contHeader h1.logo {width:120px;float:left;}
.contHeader h1.logo:after {content:'';display:block;clear:both;}
.contHeader h2 {width:350px;position:absolute;top:0;left:50%;margin-left:-270px;}

.contHeader .txtHeader {text-align:center;padding:230px 0 30px 0;background:url('/image/together/fortune/sticker_header.png') center 0 no-repeat;}
.contHeader .txtHeader h4 {
	color:#114063;
	font-size:27px;
	margin:0 auto;
	margin-bottom:10px;
	font-family:"NanumGothicExtraBold";
}
.contHeader .txtHeader h5 {font-size:16px;letter-spacing:-1px;line-height:1.2;}

/**********************  //header   ************************/


/**********************  container   ************************/

#container1 {padding-bottom:30px;}
#contents .firstDeck, 
#contents .secondDeck {width:500px;margin:0 auto;}


.box {
  position:relative;
  display: inline-block;
  width: 28%;
  height:200px;
  cursor:pointer;
  margin-top:20px;
}
.box:nth-child(3n) {margin-right:0;}



.box div {
	display: block;
	height:100%;
	width:100%;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	transition: all 2s ease;
	backface-visibility:hidden;
	transform-style:preserve-3d;
	position:absolute;
	top:0;left:0;

}

.flip {
	-webkit-perspective: 600;
	-moz-perspective: 600px;
	-ms-perspective: 600px;
	-o-perspective: 600px;
	perspective: 600;
}

.front {z-index:10;}
.rear {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	text-align:center;
}

.flip .front {
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-ms-transform:rotateY(180deg);
}

.flip .rear {
	z-index:20;
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	-webkit-transition: all 2s ease;	
	-moz-transition: all 2s ease;	
	-ms-transition: all 2s ease;	
	transition: all 2s ease;
}


.secondDeck {display:none;}

.resultArea {width:425px;margin:0 auto;margin-top:20px;}

.resultArea .firstDeckResult,
.resultArea .secondDeckResult {display:block;height:100%;}
.resultArea .firstDeckResult {float:left;width:48%;}
.resultArea .secondDeckResult {float:right;width:48%;}

.resultArea:after {content:'';display:block;clear:both;}
.win {
	width:100%;
	height:100%;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}




.viewSelectedCard {
	display:none;
	width:100%;
	-webkit-border-top-left-radius:20px;
	-moz-border-top-left-radius:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-top-right-radius:20px;
	border-top-right-radius:20px;
	border:5px solid #b9d3d1;
	background:#fff;
	position:relative;
	margin-bottom: -15px;
	margin-top: 15px;
}

.cardResult {width:60%;margin:0 auto;margin-top:50px;}
.cardResult ul li {float:left;display:block;margin-right:2%;padding-bottom:20px;}
.cardResult ul:after {content:'';display:block;clear:both;}
.cardResult ul li.selectedCard {width:30%;background:url('/image/together/fortune/card_shadow.png') no-repeat 0 99%;background-size:100%;}
.cardResult ul li.plus {width:5%;padding-top:20%;}

.cardResult ul li.outcome {
	width:28%;
	padding-top:2%;
	margin-right:0;
	cursor:pointer;
	background:url('/image/together/fortune/card_shadow.png') no-repeat 0 99%;
	background-size:100%;

}

.cardResult ul li.outcome .outcomeCard{
	display:none;
	background:url('/image/together/fortune/bg_result_card.png') no-repeat 0 0;
	width:100%;
	height:100%;
	background-size:100% 100%;
	text-align:center;	
	padding:31px 20px;
	cursor:default;

}
.outcomeCard p.point {
	background:#1d073a url('/image/together/fortune/icon_tarot_result.png') no-repeat 3px 0;
	color:#fff;
	padding:5px 15px;
	font-size:16px;
	margin-bottom:15px;
}
.outcomeCard div.resultItem p,
.outcomeCard div.resultNum p {color:#5a5a5a;font-size:15px;}
.outcomeCard div.resultItem span,
.outcomeCard div.resultNum span {color:#000;font-family:"NanumGothicExtraBold";font-size:13px;color:#ff0000;}
.outcomeCard .shapeBlock {
	width:100%;
	height:10px;
	background:url('/image/together/fortune/icon_shape.png') no-repeat 50%;
	background-size:10px;
	margin-top:8px;
	margin-bottom:8px;
}
.viewSelectedCard .inform {
	display:none;
	background-color:#1d073a;
	width:100%;
	height:40px;
	padding-top:8px;
	text-align:center;
	-webkit-border-top-left-radius:15px;
	-moz-border-top-left-radius:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-top-right-radius:15px;
	border-top-right-radius:15px;
	-webkit-box-shadow: 0px 10px 15px 0px rgba(22, 5, 45, 0.5)
	-moz-box-shadow:    0px 10px 15px 0px rgba(22, 5, 45, 0.5)
	-ms-box-shadow:     0px 10px 15px 0px rgba(22, 5, 45, 0.5)
	box-shadow:         0px 10px 15px 0px rgba(22, 5, 45, 0.5)
}

.viewSelectedCard .inform p {font-size:16px;color:#fff;}
.viewSelectedCard .inform p a {font-size:18px;color:#ffb000;vertical-align:middle;margin-right:3px;}

.expResult {width:75%;margin:0 auto;text-align:center;margin-top:10px;}
.expResult p {font-size:16px;}
.expResult .txtBold2 {font-size:19px;font-family:"NanumGothicExtraBold";}
.expResult p.expUpper {margin-bottom:35px;}

div.guide {width:65%;margin:0 auto;font-size:16px;font-family:"NanumBarunGothic";}
div.guide span {}
.recommendArea {text-align:center;margin-top:20px;}
.recommendArea > div {display:inline-block;width:33%;position:relative;border:3px solid #dedede;}
.recommendArea div p {
	width:170px;
	font-size:16px;
	color:#fff;
	background-color:#1d063a;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-85px;
	text-align:center;
}

.recommendArea div.txtMask {	
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:30px;
	display:block;
	background-color:#000;
	opacity:0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
	text-align:center;
}

.recommendArea div span {
	color:#fff;
	font-size:14px;
	margin:0 auto;
	display:block;
	margin-top:5px;
	font-weight:bold;
	font-family:"NanumBarunGodic";
}

/**********************  //container   ************************/

/**********************  container2   ************************/

#container2 {background:url('/image/together/fortune/bg_bottom.png') repeat-x 0 0;height:500px;position:relative;padding-top:20px;}
.contents2 {
	width:845px;
	margin:0 auto;	
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}


.btnActivate,
.expResult p.expUpper a {
	width:160px;
	margin:0 auto;
	-moz-box-shadow:inset 0px 0px 15px 3px #1e0143;
	-webkit-box-shadow:inset 0px 0px 15px 3px #1e0143;
	box-shadow:inset 0px 0px 15px 3px #1e0143;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #402168), color-stop(1, #1d063a));
	background:-moz-linear-gradient(top, #402168 5%, #1d063a 100%);
	background:-webkit-linear-gradient(top, #402168 5%, #1d063a 100%);
	background:-o-linear-gradient(top, #402168 5%, #1d063a 100%);
	background:-ms-linear-gradient(top, #402168 5%, #1d063a 100%);
	background:linear-gradient(to bottom, #402168 5%, #1d063a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#402168', endColorstr='#1d063a',GradientType=0);
	background-color:#402168;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	border-radius:18px;
	border:1px solid #1f2f47;
	cursor:pointer;
	text-align:center;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
.btnActivate:hover,
.expResult p.expUpper a:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1d063a), color-stop(1, #402168));
	background:-moz-linear-gradient(top, #1d063a 5%, #402168 100%);
	background:-webkit-linear-gradient(top, #1d063a 5%, #402168 100%);
	background:-o-linear-gradient(top, #1d063a 5%, #402168 100%);
	background:-ms-linear-gradient(top, #1d063a 5%, #402168 100%);
	background:linear-gradient(to bottom, #1d063a 5%, #402168 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d063a', endColorstr='#402168',GradientType=0);
	background-color:#1d063a;
}
.btnActivate:active,
.expResult p.expUpper a:active {
	position:relative;
	top:1px;
}
.expResult p.expUpper a {
	display:block;
	width:105px;
	margin:0 auto;
	font-size:16px;
	padding:6px;
	color:#fff;
}
.actShuffle {margin-top:30px;}

.btnActivate a {color:#fff;	font-size:18px;font-family:"NanumGothicExtraBold";	}

.actResult {display:none;}


.partner {margin-top:60px;}

.partner .txtPartner {
	text-align:center;
	-webkit-border-top-left-radius:20px;
	-moz-border-top-left-radius:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-top-right-radius:20px;
	border-top-right-radius:20px;
	background-color:#b3c1b0;
	padding-top:10px;
	padding-bottom:10px;
}

.partner .txtPartner p {font-size:18px;}
.partner .txtPartner p.largeP {font-size:25px;}

.partner .scrollWrap {
	background:url('/image/together/fortune/bg_scrollArea.png') repeat 0 0;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-bottom-left-radius:20px;
	border-bottom-left-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-bottom-right-radius:20px;
	border-bottom-right-radius:20px;
	padding-top:30px;
	padding-bottom:20px;
	margin:0 auto;
	padding-top:15px;
	position:relative;
}

.partner .scrollWrap .scroll {width:90%;margin:0 auto;margin-bottom:15px;overflow:hidden;}
.partner .scrollWrap .scrollRightT, 
.partner .scrollWrap .scrollRightB {
	display:block;
	position:absolute;
	background:url('/image/together/fortune/arrowRight.png') no-repeat 0 0;
	width:15px;
	height:35px;
	background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/image/together/fortune/arrowRight.png', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/image/together/fortune/arrowRight.png', sizingMethod='scale')";
}


.partner .scrollWrap .scrollLeftT, 
.partner .scrollWrap .scrollLeftB {
	display:none;
	position:absolute;
	background:url('/image/together/fortune/arrowLeft.png') no-repeat 0 0;
	width:15px;
	height:35px;
	background-size:100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/image/together/fortune/arrowLeft.png', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/image/together/fortune/arrowLeft.png', sizingMethod='scale')";
}

.partner .scrollWrap .scrollLeftT {top:30px;left:12px;}
.partner .scrollWrap .scrollLeftB {top:110px;left:12px;}

.partner .scrollWrap .scrollRightT {top:30px;right:12px;}
.partner .scrollWrap .scrollRightB {top:110px;right:12px;}

.partner .scrollWrap .scroll:last-child {margin-bottom:0;}
.partner .scrollWrap .innerScroll {overflow:hidden;}
.partner .scrollWrap ul {width:2500px;}
.partner .scrollWrap ul li {float:left;display:block;margin-right:10px;width:100px;}
.partner .scrollWrap ul:after {content:'';display:block;clear:both;}





.tree1 img,
.tree2 img,
.tree3 img,
.tree4 img {height:100%;}
.tree1 {width:220px;height:443px;position:absolute;left:0;bottom:0;}
.tree2 {width:200px;height:222px;position:absolute;left:80px;bottom:0;}
.tree3 {width:240px;height:291px;position:absolute;right:20px;bottom:0;}
.tree4 {width:204px;height:495px;position:absolute;right:0;bottom:0;}

/**********************  //container2   ************************/

/**********************  footer   ************************/

#footer {
	background:url('/image/together/fortune/bg_pattern_footer.png');
	background-position:0 0; 
	background-repeat:repeat-x;
	background-size:auto 100%;
	position:relative;
	margin-top:-75px;
	text-align:center;
	padding-top:70px;
}
#footer p {color:#fff;font-size:15px;}
#footer p.logoFooter {width:120px;margin:0 auto;margin-bottom:15px;}
/**********************  //footer   ************************/



/********************** lt ie8 ****************************/

body.ie8 .cardResult UL LI.outcome .outcomeCard,
body.ie7 .cardResult UL LI.outcome .outcomeCard{
	background:none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/image/together/fortune/bg_result_card.png', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/image/together/fortune/bg_result_card.png', sizingMethod='scale')";

}


body.ie8 .partner .scrollWrap .scrollLeftT,
body.ie8 .partner .scrollWrap .scrollRightT,
body.ie8 .partner .scrollWrap .scrollLeftB,
body.ie8 .partner .scrollWrap .scrollRightB,
body.ie7 .partner .scrollWrap .scrollLeftT,
body.ie7 .partner .scrollWrap .scrollRightT,
body.ie7 .partner .scrollWrap .scrollLeftB,
body.ie7 .partner .scrollWrap .scrollRightB {background-image:none;}


body.ie8 #footer,
body.ie7 #footer {height:180px;margin-top:-115px;padding-top:110px;}
body.ie7 #footer {height:85px;}

body.ie8 .box {width:28%;margin-right:5%;}
body.ie7 .box {width:28%;margin-right:5%;float:left;display:block;}


body.ie7 .firstDeck:after,
body.ie7 .secondDeck:after {content:'';display:block;clear:both;}
body.ie7 .recommendArea {padding-left:10px;}
body.ie7 .recommendArea > DIV {float:left;display:block;width:32.5%;}
body.ie7 .recommendArea:after {content:'';clear:both;display:block;}
body.ie8 .recommendArea DIV.txtMask,
body.ie7 .recommendArea DIV.txtMask {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; //
    filter: alpha(opacity=50);
}

/********************** //lt ie8 ****************************/


/********************** media query ************************/

@media all and (max-width:1400px){
.tree1,
.tree2,
.tree3,
.tree4 {display:none;}
}

@media all and (max-device-width:1024px){
.flip .front {-webkit-transition:0s;-moz-transition:0s;-ms-transition:0s;transition:0s;}
.flip .rear {-webkit-transition:0s;-moz-transition:0s;-ms-transition:0s;transition:0s;}
.rear {transform: rotateY(0deg);}
}


@media all and (max-width:1024px){


.contHeader, 
#contents {width:100%;}
.contents2  {width:90%;}
.contHeader {position:static;}
.contHeader h1.logo {position:absolute;top:10px;left:20px;width:15%;}
.contHeader h2 {width:40%;left:50%;margin-left:-20%;top:40px;}
.contHeader h3 {width:25%;top:220px;margin-left:-12.5%;}

.contHeader .txtHeader {width:90%;margin:0 auto;}
.viewSelectedCard {width:95%; margin:15px auto -15px auto;}

.expResult {width:90%;}

.outcomeCard p.point {padding:3% 15%;font-size:10px;margin-bottom:5px;}
.outcomeCard div.resultItem p,
.outcomeCard div.resultNum p {font-size:10px;}
.outcomeCard div.resultItem span,
.outcomeCard div.resultNum span {font-size:9px;}
.outcomeCard .shapeBlock {margin-top:5px;margin-bottom:5px;}
.viewSelectedCard .inform p {font-size:16px;}
.viewSelectedCard .inform p a {font-size:18px;}
}

@media all and (max-device-width : 768px) and (orientation : landscape){
.contHeader h3 {top:265px;}
.contHeader .txtHeader {margin-top:290px;}


.outcomeCard p.point {padding:5px 15px;font-size:16px;margin-bottom:15px;}
.outcomeCard div.resultItem p,
.outcomeCard div.resultNum p {font-size:15px;}
.outcomeCard div.resultItem span,
.outcomeCard div.resultNum span {font-size:13px;}
.outcomeCard .shapeBlock {margin-top:8px;margin-bottom:8px;}

}


@media all and (max-width:760px){
.cardResult ul li.outcome .outcomeCard {padding:20% 13%;}
.outcomeCard p.point {font-size:13px;margin-bottom:10px;}
.outcomeCard .shapeBlock {margin-top:2px;margin-bottom:2px;}
.outcomeCard div.resultItem p,
.outcomeCard div.resultNum p {font-size:15px;}
.outcomeCard div.resultItem span,
.outcomeCard div.resultNum span {font-size:13px;}
.outcomeCard .shapeBlock {margin-top:2px;margin-bottom:2px;}
.viewSelectedCard .inform p {font-size:13px;}
.viewSelectedCard .inform p a {font-size:15px;}

.cardResult {width:90%;}
.partner {margin-top:20px;}
}





@media all and (min-width:640px) and (max-width:760px){

	.contHeader h3 {top:200px;}

	.contHeader .txtHeader h4 {font-size:20px;}
	#container2 {height:450px;}
	.expResult .txtBold2 {font-size:15px;}
	.expResult p {font-size:13px;}
	.recommendArea div span {font-size:12px;}
	.viewSelectedCard .inform
	.viewSelectedCard .inform p {padding-top:9px;}


	#footer {border:none;}
}
@media all and (max-width:568px){
	#container1 {background-repeat:repeat;}
	#contents .firstDeck, 
	#contents .secondDeck {width:90%;}
	.resultArea {width:90%;height:auto;}
	.contents2 {width:90%;}
	.cardResult {width:80%;}
	.recommendArea > div {display:block;width:95%;margin:0 auto;margin-bottom:10px;}
	.recommendArea div p {width:100%;margin-left:-50%;}
}

@media all and (max-width:500px){
#contents .firstDeck, 
#contents .secondDeck {width:300px}
}


@media all and (min-width:480px) and (max-width:638px){
	.contHeader h3 {top:160px;}
	.contHeader .txtHeader h4 {font-size:15px;width:80%;}
	.contHeader .txtHeader h5 {font-size:13px;}
	.txtBold,
	.violetBold  {font-size:16px;}

	.outcomeCard p.point {font-size:8px;margin-bottom:5px;}
	.outcomeCard div.resultItem p,
	.outcomeCard div.resultNum p {font-size:10px;}	
	.outcomeCard div.resultItem span,
	.outcomeCard div.resultNum span {font-size:9px;}
}

@media all and (max-width:459px){

	#container2 {height:380px;}
	div.guide {width:100%;}

	.contHeader h3 {top:190px;width:35%;margin-left:-17.5%;}
	.contHeader h2 {width:70%;margin-left:-35%;}
	.contHeader .txtHeader h4 {width:90%;font-size:13px;}
	.contHeader .txtHeader h5 {font-size:12px;}
	.txtBold,
	.violetBold  {font-size:13px;}

	.box {height:150px;margin-top:15px;}
	.partner .scrollWrap ul li {width:60px;}
	.partner .scrollWrap .scrollLeftT {top:20px;}
	.partner .scrollWrap .scrollLeftB {top:80px;}
	.partner .scrollWrap .scrollRightT {top:20px;}
	.partner .scrollWrap .scrollRightB {top:80px;}
	.partner .txtPartner p.largeP {font-size:20px;}
	.partner .txtPartner p {font-size:13px;}
	.partner .scrollWrap .scroll {width:80%;}

	.cardResult {margin-top:20px;}

	.expResult p {font-size:12px;}
	.expResult .txtBold2 {font-size:14px;}

	#footer p.logoFooter {width:20%;}
	#footer p {font-size:12px;}


	.partner .scrollWrap .scrollRightT, 
	.partner .scrollWrap .scrollRightB,
	.partner .scrollWrap .scrollLeftT, 
	.partner .scrollWrap .scrollLeftB {width:10px;height:30px;}

	.cardResult ul li.selectedCard {width:48%;margin-bottom:15px;}
	.cardResult ul li.plus {float:none;width:10%;margin:0 auto;}
	.cardResult ul li.outcome {float:none;width:50%;margin:0 auto;}

	.outcomeCard p.point {font-size:14px;margin-bottom:10px;}
	.outcomeCard div.resultItem {margin-bottom:10px;}
	.outcomeCard div.resultItem p,
	.outcomeCard div.resultNum p {font-size:13px;}
	.outcomeCard div.resultItem span,
	.outcomeCard div.resultNum span {font-size:15px;}
	.viewSelectedCard .inform {padding-top:7px;height:30px}
	.viewSelectedCard .inform p {font-size:12px;}
	.viewSelectedCard .inform p a {font-size:13px;vertical-align:baseline;}
	.outcomeCard .shapeBlock {display:none;}
}
@media all and (max-width:360px){
	#container2 {height:330px;}
}

@media all and (max-width:320px){

.contHeader .txtHeader h4 {font-size:11px;}
.outcomeCard p.point {font-size:10px;}
.box {width:29%;height:110px;}

}

/********************** //media query ************************/