@charset "utf-8";

/* index
================================================== */
#wrap{
	margin-top:80px; 
	width:100%;
	min-width:1120px;
}

.width_wrap{
	width: 1120px;
	margin:0 auto;	
}

/* app download
================================================== */
#top_download{
	position:absolute;
	width:288px;
	background-color:#fff;
	z-index:9990;	
	bottom:15%;
	padding:12px;
	font-size:0.75em;
	line-height:16px;
	color:#072f58;
	background-color: rgba(255,255,255,0.8);
	border-radius:8px;        
    -webkit-border-radius:8px; 
    -moz-border-radius:8px;	
}

/* main img
================================================== */
#top_app_area{
	position:relative;
	width:100%; 
	margin:0auto; 
	text-align:center;
}

#top_main_icon{
	margin-top:8px;
}

#top_mainarea{
	position:relative;
	margin-top:80px;
	min-width:1280px;
}

.main img{
	width:100%; 
	min-width:1280px;
}


/* banner
================================================== */
#top_banner_area{
	position:relative;	
	width:100%;
	z-index:3000; 
}

.BnrArea{
	position:relative;
	width:1120px;
	margin:0 auto;
}

.banner{
	position:absolute;
	width:1120px;
	height:92px; 
	margin-top:72px; 
	text-align:center; 
	display:block;
}

.banner01{
	margin-right:22px; 
	
}

/* banner Bg 
------------------------------ */
.bk_topBnrBg{
	position:absolute;
	width:100%; 
	height:80px; 
	margin-top:160px; 
	min-width:1280px; 
	overflow:hidden;
	transform:skew(0deg, -3.1deg); 
	-webkit-transform:skew(0deg, -3.1deg); 
  	-ms-transform:skew(0deg, -3.1deg); 
	background-color:#000; 
	z-index:1000;
}

.BnrBg{
	position:relative;
	margin-top:-310px; 
	width:100%; 
	height:780px; 
	min-width:1280px; 
	overflow:hidden;
	z-index:2000;
}

.BnrContent{
	height:240px; 
	margin-top:170px; 
	transform:skew(0deg, -2.5deg); 
	-webkit-transform:skew(0deg, -2.5deg); 
  	-ms-transform:skew(0deg, -2.5deg); 
	background:url("../images/common/pattern.png"), linear-gradient(left,#4375e5 0%,#6b98f3 32%, #16d2d4 100%);
	background:url("../images/common/pattern.png"), -webkit-linear-gradient(left,#4375e5 0%,#6b98f3 32%, #16d2d4 100%);
	background:url("../images/common/pattern.png"), -ms-linear-gradient(left,#4375e5 0%,#6b98f3 32%, #16d2d4 100%);
	background-color:#2972be;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4375e5', endColorstr='#16d2d4',GradientType=0 );
	z-index:2000;
}

.Bnrnoskew{
	transform:skew(0deg, 2.5deg);
	-webkit-transform:skew(0deg, 2.5deg);
  	-ms-transform:skew(0deg, 2.5deg);
}

.bk_bottomBnrBg{
	margin-top:-444px; 
	margin-bottom:268px; 
}

.bk_bottomBnrContent{
	position:relative;
	width:100%; 
	height:80px; 
	min-width:1280px; 
	overflow:hidden;
	z-index:1000;
	transform:skew(0deg, -2.3deg); 
	-webkit-transform:skew(0deg, -2.3deg); 
  	-ms-transform:skew(0deg, -2.3deg); 
	background-color:#000; 
	z-index:1500;
}

/* notice
================================================== */
#top_notice_bg{
	position:relative;
	width:100%;
	min-width:1120px;
	margin-top:-196px; 
	z-index:4000; 
}

#top_notice_area{
	width:100%;
	min-width:1280px;
	margin:0 auto;
	text-align:center;
	z-index:4000; 
}

.top_notice_title h2{
	margin:0 auto;
	width:142px;
	height:27px; 
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/index/notice_title.png) 0 0  no-repeat;
	z-index:4000; 
}

/* notice contents
================================================== */
.top_notice_contents{
	width:400px;
	margin:0 auto;
	margin-top:32px; 
	z-index:4000; 
}

.top_notice_contents dl{
	font-size:0.875em;
	line-height: 1.6em;
	color:#000; 
	z-index:4000; 
}

.top_notice_contents dl dt{
	font-size:1em;
	width:12px;
	z-index:4000; 
}

.top_notice_contents a{
	color:#000; 
	z-index:4000; 
}

.top_notice_contents dl dd{
	margin: -1.6em 0 4px 0;
	padding: 0 0 4px 60px;
}

.top_notice_contents dl dd a:hover{
	color:#5a5a5a; 
	z-index:4000; 
}

/* notice btn
================================================== */
.top_notice_btn a{
	margin:0 auto;
	margin-top:40px; 
	display:block;
	text-align:center;
	width:200px;
	height:20px;
	background-color:#000;
	color:#FFF;
	padding:20px;
	text-decoration:none;
	font-size:16px;
    border-radius:32px;
	-webkit-border-radius:32px;
	-moz-border-radius:32px;
	z-index:4000; 
}

.top_notice_btn a,
.top_notice_btn a::before,
.top_notice_btn a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.top_notice_btn a:hover {
	background-color:#4d4d4d;
}

.top_notice_btn_arrow{
	float:right;
	right:4px;
	padding-top:1px; 	
}

/* topics Bg 
------------------------------ */
.topicsBgleft{
	position:absolute;
	width:100%; 
	height:160px; 
	margin-top:160px; 
	min-width:1280px; 
	overflow:hidden;
	transform:skew(0deg, 2.5deg); 
	-webkit-transform:skew(0deg, 2.5deg); 
  	-ms-transform:skew(0deg, 2.5deg); 
	background:url("../images/common/pattern_left.png"), linear-gradient(left,#4375e5 0%,#6b98f3 32%, #16d2d4 100%);
	background:url("../images/common/pattern_left.png"), -webkit-linear-gradient(left,#4375e5 0%,#6b98f3 32%, #16d2d4 100%);
	background:url("../images/common/pattern_left.png"), -ms-linear-gradient(left,#4375e5 0%,#6b98f3 32%, #16d2d4 100%);
	background-color:#2972be;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4375e5', endColorstr='#16d2d4',GradientType=0 );
	z-index:1000;
}

.bk_toptopicsBg{
	position:absolute;
	width:100%;
	height:80px; 
	margin-top:160px; 
	min-width:1280px; 
	overflow:hidden;
	transform:skew(0deg, -3.1deg); 
	-webkit-transform:skew(0deg, -3.1deg); 
  	-ms-transform:skew(0deg, -3.1deg); 
	background-color:#000; 
	z-index:1000;
}

.topicsBg{
	position:relative;
	margin-top:-96px; 
	width:100%; 
/*	height:2512px; */
	height:600px;
	min-width:1280px; 
	overflow:hidden;
	z-index:2000;
}

.topicsContent{
/*	height:1972px;*/ 
	height:0;
	margin-top:170px; 
	transform:skew(0deg, -2.5deg); 
	-webkit-transform:skew(0deg, -2.5deg); 
  	-ms-transform:skew(0deg, -2.5deg); 
	background:url("../images/common/other_bg_skew.png") 0 0 ;
	background-size:100% auto;
	background-color:#fff;
	z-index:2000;
}

.BnrArea{
	position:relative;
	width:1120px;
	margin:0 auto;
}

.topicsnoskew{
	position:relative;
	width:1280px;
	margin:0 auto;
	transform:skew(0deg, 2.5deg);
	-webkit-transform:skew(0deg, 2.5deg);
  	-ms-transform:skew(0deg, 2.5deg);
}

.topicsAll{
	position:absolute;
	width:1280px;
	margin-top:72px; 
	text-align:center; 
	display:block;
}

.bk_bottomtopicsBg{
	margin-top:-444px; 
}

.bk_bottomtopicsContent{
	position:relative;
	width:100%; 
	height:80px; 
	min-width:1280px; 
	overflow:hidden;
	z-index:1000;
	transform:skew(0deg, -2.3deg); 
	-webkit-transform:skew(0deg, -2.3deg); 
  	-ms-transform:skew(0deg, -2.3deg); 
	background-color:#000; 
	z-index:1500;
}

/* movie Bg 
------------------------------ */
.bk_topMvBg{
	position:absolute;
	width:100%; 
	height:80px; 
	margin-top:160px; 
	min-width:1280px; 
	overflow:hidden;
	transform:skew(0deg, -3.1deg); 
	-webkit-transform:skew(0deg, -3.1deg); 
  	-ms-transform:skew(0deg, -3.1deg); 
	background-color:#000; 
	z-index:1000;
}

.MvBg{
	position:relative;
	margin-top:-110px; 
	width:100%; 
	height:940px; 
	min-width:1280px; 
	overflow:hidden;
	z-index:2000;
}

.MvContent{
	height:560px; 
	margin-top:100px; 
	transform:skew(0deg, -2.5deg); 
	-webkit-transform:skew(0deg, -2.5deg); 
  	-ms-transform:skew(0deg, -2.5deg); 
	background:url("../images/index/mv_bg.png") 0 0 no-repeat;
	background-size:100% auto;
	z-index:2000;
}

.Mvnoskew{
	transform:skew(0deg, 2.5deg);
	-webkit-transform:skew(0deg, 2.5deg);
  	-ms-transform:skew(0deg, 2.5deg);
	z-index:1500;
}

.bk_bottomMvBg{
	margin-top:-354px; 
	z-index:1500;
}

.bk_bottomMvContent{
	position:relative;
	width:100%; 
	height:80px; 
	min-width:1280px; 
	overflow:hidden;
	z-index:1000;
	transform:skew(0deg, -2.3deg); 
	-webkit-transform:skew(0deg, -2.3deg); 
  	-ms-transform:skew(0deg, -2.3deg); 
	background-color:#000; 
	z-index:1500;
}

/* topics_area
================================================== */
#top_topics_area{
	clear:both; 
	position:relative;
	width:100%; 
	min-width:1280px;
}

/* topics btn
================================================== */
.top_topics_btn a{
	margin:0 auto;
	margin-top:1640px; 
	display:block;
	text-align:center;
	width:272px;
	height:24px;
	background-color:#3cade8;
	color:#FFF;
	padding:20px;
	text-decoration:none;
	font-size:16px;
	line-height:24px; 
    border-radius:32px;
	-webkit-border-radius:32px;
	-moz-border-radius:32px;
	z-index:4000; 
}

.top_topics_btn a,
.top_topics_btn a::before,
.top_topics_btn a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.top_topics_btn a:hover {
	background-color:#158fcf;
}

/* movie play
================================================== */
.top_movie_contents{
	position:absolute;
	width:100%;
	min-width:1280px; 
	margin:0 auto; 
	text-align:center;
	z-index:2000; 
}

.top_movie_title{
	margin:0 auto;
	width:255px;
	height:27px; 
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/index/movie_title.png) 0 0  no-repeat;
	margin-top:200px;
}

.top_movie_play{
	margin:0 auto;
	margin-top:24px;
}

.top_movie_play a:hover {
    cursor:pointer;
    filter:alpha(opacity=80);
    -ms-filter: "alpha(opacity=70)";
    -moz-opacity:0.7;
    -khtml-opacity: 0.7;
    opacity:0.7;
    zoom:1;
	-webkit-transition: all .3s ease;
  	transition: all .3s ease;
}

/* circle
================================================== */
.top_center{
	position:absolute;
	width:100%; 
	margin:0 auto;
	text-align:center;
}

.top_circle{

	width:1280px; 
	margin:0 auto;
	text-align:center;
	margin-bottom:80px; 
}

.top_circle img{

	min-width:1280px;
	margin-top:-160px; 
	display: block;
	z-index:80
}

/* other Bg 
------------------------------ */
.bk_topOtherBg{
	position:absolute;
	width:100%; 
	height:80px; 
	margin-top:-240px; 
	min-width:1280px; 
	overflow:hidden;
	transform:skew(0deg, -3.1deg); 
	-webkit-transform:skew(0deg, -3.1deg); 
  	-ms-transform:skew(0deg, -3.1deg); 
	background-color:#000; 
	z-index:1000;
}

.OtherBg{
	position:relative;
	width:100%; 
	margin-top:-480px; 
	height:780px; 
	min-width:1280px; 
	overflow:hidden;
	z-index:2000;
}

.OtherContent{
	height:360px; 
	margin-top:250px; 
	transform:skew(0deg, -2.5deg); 
	-webkit-transform:skew(0deg, -2.5deg); 
  	-ms-transform:skew(0deg, -2.5deg); 
	background:url("../images/common/pattern.png"), linear-gradient(left,#4375e5 0%,#6b98f3 32%, #16d2d4 100%);
	background:url("../images/common/pattern.png"), -webkit-linear-gradient(left,#4375e5 0%,#6b98f3 32%, #16d2d4 100%);
	background:url("../images/common/pattern.png"), -ms-linear-gradient(left,#4375e5 0%,#6b98f3 32%, #16d2d4 100%);
	background-color:#2972be;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4375e5', endColorstr='#16d2d4',GradientType=0 );
	z-index:2000;
}

.Othernoskew{
	transform:skew(0deg, 2.5deg);
	-webkit-transform:skew(0deg, 2.5deg);
  	-ms-transform:skew(0deg, 2.5deg);
	z-index:1500;
}

.bk_bottomOtherBg{
	margin-top:-244px; 
}

.bk_bottomOtherContent{
	position:relative;
	width:100%; 
	height:80px; 
	min-width:1280px; 
	overflow:hidden;
	z-index:1000;
	transform:skew(0deg, -2.3deg); 
	-webkit-transform:skew(0deg, -2.3deg); 
  	-ms-transform:skew(0deg, -2.3deg); 
	background-color:#000; 
	z-index:1500;
}

/* top twitter download area
================================================== */
#top_bottom_area{
	position:relative;
	width:960px;
	height:424px; 
	display:block;
	margin:0 auto;
	z-index:4000; 
}

.top_twitter_contents{
	position:absolute;
	float:left; 
	width:460px;
	height:424px; 
	margin:0 auto; 
	margin-top:80px; 
	text-align:center;
	background-color:#fff; 
	border:2px solid #0094e0;
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	z-index:100; 
}

.top_twitter_title{
	margin:0 auto;
	width:461px;
	height:50px; 
	display:block;
	text-align: center;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/index/twitter_title.png)  no-repeat center;
	border-top-left-radius:4px;
	-webkit-border-top-left-radius:4px;
	-moz-border-top-left-radius:4px;
	border-top-right-radius :4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-top-right-radius:4px;
	background-color:#0094e0; 
}

.top_twitter_title h2{
	margin:0 auto;
	text-align:center;
}

/* top twitter area
================================================== */
.top_twitter_area{
	width:392px;
	height:326px;
	margin:24px 0px 0px 32px;
	background-color:#fff; 
}

.top_twitter_area a{
	text-decoration:none;
	color:#000; 
}

.download_contents{
	position:absolute;
	float:left; 
	width:460px;
	height:424px; 
	margin-left:500px;  
	margin-top:80px; 
	text-align:center;
	background-color:#fff; 
	border-radius:16px;
	border:2px solid #000;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	z-index:100; 
}

.download_info_title h2{
	margin:0 auto;
	width:367px;
	height:78px; 
	display:block;
	margin-top:32px; 
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/registration/dl_logo.png)  no-repeat center;
}

.download_info_title h3{
	margin:0 auto;
	width:238px;
	height:69px; 
	display:block;
	margin-top:20px; 
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/registration/dl_area_copy.png)  no-repeat center;
}

.download_info_title p{
	margin:0 auto;
	width:396px; 
	margin-top:32px; 
	text-align:left;
	font-size:0.875em; 
	line-height:24px;
	font-weight:bold;
}

#download_infon_icon{
	width:396px; 
	height:56px;
	margin:0 auto;
	margin-top:34px;
}

#dl_app_icon{
	float:left;
	height:56px;
}

#dl_google_icon{
	float:left;
	height:56px;
	margin-left:16px; 
}

/* top share
================================================== */
.top_share_bg{
	margin-top:-100px;
}

.top_share_Area{
	position:absolute;
	width:100%;
	min-width:1280px; 	
}

.top_share_contents{
	position:relative;
	width:100%;
	height:320px; 
	min-width:1280px; 	
	margin:0 auto; 
	text-align:center;
	z-index:100; 
	background:url("../images/common/pattern_share.png") 0 0 ;
}

.top_share_zindex{
	width:100%;
	min-width:1120px; 
	position:absolute;
	text-align:center;
	margin:0 auto;
	margin-top:172px; 
	z-index:9000; 
}

.top_share_center{
	text-align:center;
	margin-top:400px; 
	margin:0 auto;
	z-index:9000; 
}

.top_share_title{
	position:relative;
	margin:0 auto;
	width:87px;
	height:26px; 
	display:block;
	text-align:center;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/index/share_title.png)  no-repeat center;
}