@charset 'utf-8';

html {background: url("../img/bg_main.jpg") #ba9a7e;}
body { width: 100%; height: auto; -webkit-text-size-adjust:100%; /*transform: scale(0.6,0.6);*/}
caption { position:absolute; left:-9999px; top:-9999px; visibility:hidden; height:0px; width:0; text-indent:-9999px; font-size:0 }

/* sns */
.sns-bns {position:absolute; bottom: 110px; left: 77px;  z-index:10000;}
.sns-bns li {border-bottom:1px solid #000}
.sns-bns li.inverse{border-bottom:1px solid #fff;}
.sns-bns li a { display:block; width:21px; height:51px; background-position:left center; background-repeat:no-repeat; overflow: hidden; text-indent:-9999px }
.sns-bns li.sns_3 { border: none}
.sns-bns li.sns_0 a{background-image:url('../img/bn_facebook.png');}
.sns-bns li.sns_1 a{background-image:url('../img/bn_twitter.png');}
.sns-bns li.sns_2 a{background-image:url('../img/bn_qqq.png');}
.sns-bns li.sns_3 a{background-image:url('../img/bn_google.png');}
.sns-bns li.inverse.sns_0 a{background-image:url('../img/bn_facebook_white.png');}
.sns-bns li.inverse.sns_1 a{background-image:url('../img/bn_twitter_white.png');}
.sns-bns li.inverse.sns_2 a{background-image:url('../img/bn_qqq_white.png');}
.sns-bns li.inverse.sns_3 a{background-image:url('../img/bn_google_white.png');}

/* info_rotate */
.info_rotate { position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; z-index:9999; display:none; }
.info_rotate img { width:100%; }
.hide_text{position:absolute; left:-9999px; top:-9999px; width:0; height:0; visibility:hidden;font-size:0;}
.acc_tag{position:absolute; left:-9999px; top:-9999px; visibility:hidden; height:0px; width:0; text-indent:-9999px; font-size:0 }

/* popup */
.pages, .cover{position:absolute; width:auto; height: 100%;}
.popup { position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:10000; background:#333;}
.popup .close-btn {position: absolute; z-index: 9999; right: 34px; top: 17px; color:#000;}
.popup .close-btn a { display:block; background:url('../img/close_btn.png') 0 0 no-repeat; width:83px; height:83px; text-indent:-10000px; margin:14px 0 0 1160px; overflow:hidden;}
.popup .close-btn a:focus{ outline:1px dotted #fff}

/* video */
.video-container {
	position:relative;
	width:912px; height:512px;
	margin:0 auto 22px;
}
.video-container > p { visibility:hidden; width:0; height:0px; }

/* contents */
.header { width: 100%; height: 106px; position: fixed; left: 0; top:0; z-index: 10;}
.header h1{ position: absolute; left: 40px; top:40px}
.header .option{ position: absolute; width: 57px; height: 19px; background: url("../img/icon_lang_eng.png") no-repeat 0 0; right: 40px; top:43px}
.header .option span { text-indent: -9999px; display: block; overflow: hidden}
.header nav { width: 480px; height: 42px;}
.header .nav{ width: 480px; height: 42px; position: absolute; right: 50%; top: 39px; margin: 0 -240px 0 0;}
.header .nav span{ text-indent: -9999px; display: block; overflow: hidden}
.header .nav li{ float: left;}
.header .nav a{ width: 60px; margin-left: 32px; display: block; height: 42px; background-image: url("../img/bg_nav_text.png"); background-repeat: no-repeat}
.header .menu1 a{ background-position: 0 0; margin-left: 0}
.header .menu2 a{ background-position: -103px 0;}
.header .menu3 a{ background-position: -206px 0;}
.header .menu4 a{ width: 81px; background-position: -309px 0;}
.header .menu5 a{ width: 77px; background-position: -436px 0;}
.header .menu1 a.on{ background-position: 0 -42px;}
.header .menu2 a.on{ background-position: -103px -42px;}
.header .menu3 a.on{ background-position: -206px -42px;}
.header .menu4 a.on{ background-position: -309px -42px;}
.header .menu5 a.on{ background-position: -436px -42px;}
.header .menu1 a.off{ background-position: 0 0;}
.header .menu2 a.off{ background-position: -103px 0;}
.header .menu3 a.off{ background-position: -206px 0;}
.header .menu4 a.off{ background-position: -309px 0;}
.header .menu5 a.off{ background-position: -436px 0;}

.tablet_wrap {}
.tablet_wrap .sns-bns{}
.tablet_wrap .content_container{
	width: 100%;
	overflow: auto;
}

.content_container {
	width: auto;
	height: 100%;
}

.content_page_wrap {
	position: relative;
	width: auto;
	font-size: 15px;
	font-family: secgcm;
	line-height: 24px;
	height: 100%;
	letter-spacing: -1px;
	text-align: justify;
	word-break: normal;
	color: #000;
	white-space: nowrap;
}

section.container { width: auto; position: relative; padding: 100px 40px 0 40px; height: 706px;}

/**
	poster
**/
.boxPoster {position: relative; display:inline-block; height:100%; margin-right:25px;}
.boxPoster img { width: auto; height: 100%; display: block }

/**
	box group
**/
.boxGroup {margin:0; position: relative; display:inline-block; height:100%; white-space: nowrap; width:4317px;}
.boxGroup .box { white-space: normal; position: relative; margin-right: 22px}
/**
	box
**/
.box {
	height: 706px;
	background: url("../img/bg_box_text.png") no-repeat right top;
	display: inline-block;
	overflow: hidden;
}

.box .line { border: 15px solid #000; opacity: 0.4; filter: alpha(opacity=40); width: 100%; height: 100%; box-sizing: border-box}
.box .txt_box { position: absolute; top: 50%; margin-top:-353px; width:100%; height: 706px;}
.box li {overflow: hidden}

.box h3 {font-family: secgcb; background: url("../img/bg_heding_line.png") repeat-x top; font-size: 19px; margin-right: 20px; padding-top: 13px; float: left; height: 100%; width: 111px}
.list1 li{ background: url("../img/bg_list_dot1.png") no-repeat 1px 6px; padding-left: 17px; margin-top: 10px}
.list2 li{ background: url("../img/bg_list_dot3.png") no-repeat 0px 8px; padding-left: 6px; font-size: 12px;}

footer { padding: 0px 40px; position: relative; height:65px; }
footer img {padding:27px 0;}

/* free loading */
div.loading {
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.8;
	position: fixed;
	left: 0;
	top:0;
	filter: alpha(opacity=80);
	z-index: 99999;
}
div.loading img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -24px 0 0 -24px;
}


/* policy popup */
#btn_policy{
	display: inline-block;
	vertical-align: middle;
	margin: -4px 0 0 8px;
}
.popup_policy{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	display: none;
}
.popup_policy .msg-wrap{
	background: url("../img/bg_main.jpg") #ba9a7e;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -300px -480px;
	height: 600px;
	width: 960px;
}
.popup_policy .msg-wrap .line{
	border: 15px solid #000;
	opacity: 0.4;
	filter: alpha(opacity=40);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	position: absolute; left: 0; top: 0;
}
.popup_policy .msg-wrap .close_btn{
	position: absolute;
	right: 0px;
	top:0px
}
.popup_policy .msg-wrap h2{
	border-bottom: solid #000000 1px;
	padding: 0 0 15px 0;
	font-size: 20px;
	padding-top: 30px;
	font-family: secgcb;
	position: relative;
}
.popup_policy .msg-wrap div.info{
	position: absolute;
	left: 52px;
	top:61px
}
.popup_policy .msg-wrap .popup-con {
	padding: 50px;
}
.popup_policy .msg-wrap ul{ margin-top: 35px}
.popup_policy .msg-wrap li {
	margin-top: 5px;
	padding-top: 3px;
	padding-left: 14px;
	background: url("../img/bg_list_dot2.png") no-repeat 0px 8px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.5px;
	font-family: secgcm;
}
.popup_policy .popup_stage {
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.8;
	position: absolute;
	left: 0;
	top: 0;
	filter: alpha(opacity=80);
}
.popup_policy .policy-text {
	white-space: pre-wrap;
	font-family: secgcm;
	position: relative;
	height: 400px;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 30px 0 30px;
	padding: 0 10px 0 0;
	line-height: 21px;
	font-size: 14px;
	letter-spacing: 0;
}
.popup_policy .policy-text h3 {
	font-size: 17px;
	font-family: secgcb;
}
.popup_policy .policy-text h4 {
	font-size: 15px;
	font-family: secgcb;
}

.popup_policy .policy-text table,
.popup_policy .policy-text table th,
.popup_policy .policy-text table td{
	color: #000;
	border: 1px solid #000;
}
.popup_policy .policy-text table th,
.popup_policy .policy-text table td{
	text-align: center;
	padding: 5px;
}
.popup_policy .policy-text table {
	width: 100%;
	border-collapse: collapse;
}

@media all and (min-width:768px) and (max-width:960px) {
	.header .nav{ right: 20%; top: 39px; margin: 0 0 0 0;}
}

@media all and (max-width:767px) {
	.header .nav{ right: 0; top: 39px; margin: 0 0 0 0; width: 605px}
	.header .nav a{margin-left: 25px;}
}