@charset "utf-8";

/*---reset---*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
a, a:visited {
	text-decoration: none;
	color: black;
}
p {
	-webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1, h2, h3 {
	font-weight: 600;
}

/*---common---*/
.sp-only {display: none;}
.pc-only {display: block;}
.inner {width: 860px; margin: 0 auto; position: relative;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt35 {margin-top: 35px;}
.mt40 {margin-top: 40px;}
.mt45 {margin-top: 45px;}
.mt50 {margin-top: 50px;}
.mt55 {margin-top: 55px;}
.mt60 {margin-top: 60px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb35 {margin-bottom: 35px;}
.mb40 {margin-bottom: 40px;}
.mb45 {margin-bottom: 45px;}
.mb50 {margin-bottom: 50px;}
.mb55 {margin-bottom: 55px;}
.mb60 {margin-bottom: 60px;}
.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml25 {margin-left: 25px;}
.ml30 {margin-left: 30px;}
.ml35 {margin-left: 35px;}
.ml40 {margin-left: 40px;}
.ml45 {margin-left: 45px;}
.ml50 {margin-left: 50px;}
.ml55 {margin-left: 55px;}
.ml60 {margin-left: 60px;}
.mr10 {margin-right: 10px;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.mr25 {margin-right: 25px;}
.mr30 {margin-right: 30px;}
.mr35 {margin-right: 35px;}
.mr40 {margin-right: 40px;}
.mr45 {margin-right: 45px;}
.mr50 {margin-right: 50px;}
.mr55 {margin-right: 55px;}
.mr60 {margin-right: 60px;}

body {
	font-family: Arial,'SourceHanSansCN';
	font-weight: 300;
}

/*---header---*/
header {
	width: 100%;
	float: left;
}
header .pc-inner{
	width: 90%;
	margin: 0 auto;
	position: relative;
}
header .logo {
	float: left;
	width: 100%;
	height: 98px;
	background: #000;
}
header .logo .left {
	height: 29px;
	float: left;
	margin: 36px 0 0 0;
}
header .logo .right {
	height: 38px;
	float: right;
	margin: 30px 0 0 0;
}
header .navbar {
	width: 100%;
	float: left;
	height: 73px;
	background: #f1f1f1;
}
header .navbar-wraper {
	width: 60%;
	width: 75%;
	float: left;
}
header .navbar-nav {
	width: 700px;
	width: 100%;
	height: 73px;
	margin: 0 auto;
}
header .navbar-nav > li {
	float: left;
	width: 115px;
	width: 20%;
	margin-right: 80px;
	margin-right: 5%;
	height: 73px;
	line-height: 73px;
	text-align: center;
	text-align: left;
}
header .navbar-nav .sp-home {
	display: none;
}
header .navbar-nav > li.last {
	margin-right: 0;
}
header .navbar-nav > li a {
	letter-spacing: 3px;
	font-weight: 600;
}
header .dropdown {
	position: relative;
}
header a.parent {
	font-size: 16px;
	font-weight: 500;
	border-bottom: 1px solid #525252;
	color: #110603;
}
header .navbar-nav li:hover .parent, header .navbar-nav .actived .parent {
	color: #d20038;
	border-bottom: 1px solid #d20038;
}
header .dropdown-menu {
	display: none;
	position: absolute;
	z-index: 11;
	left: -35px;
	top: 73px;
}
header .dropdown-menu::before {
	content: '';
	position: absolute;
	width: 0px;
	height: 0px;
	border-top: 6px solid #f1f1f1;
	border-right: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid transparent;
	left: 86px;
	top: 0;
}
header .dropdown-menu li {
	background: #4e4e4e;
	border-bottom: 1px solid #838383;
	text-align: center;
}
header .dropdown-menu li:last-child {
	border-bottom: none;
}
header .dropdown-menu li a {
	width: 185px; 
	color: #fff;
	font-size: 14px;
	height: 40px;
	line-height: 40px;
	display: block;
	font-weight: normal;
}

header .search {
	width: 40%;
	width: 260px;
	max-width: 25%;
	float: right;
}
header .navbar-download {
	float: left;
	margin-top: 20px;
	width: 160px;
	text-align: center;
}
header .navbar-download a {
	color: #fff;
	font-size: 15px;
	line-height: 33px;
	font-weight: 700;
	display: block;
	transition: all .3s;
	background: #d20038;
}
header .search ul {
	float: left;
	float: right;
}
header .search ul li {
	float: left;
	line-height: 73px;
	margin-right: 20px;
}
header .search ul li a {
	font-size: 14px;
}
header .search ul li a:hover {
	color: #d20038;
}
header .search ul li.tag {
	height: 26px;
	width: 94px;
	/* margin: 24px 20px 0 0; */
	margin: 20px 0 0 0;
	cursor: pointer;
	line-height: 33px;
	text-align: center;
	transition: all .3s;
}
header .navbar-download a:hover,header .search ul li.tag:hover{
	opacity: .6;
}
header .search ul li.tag img {
	width: 100%;
}
header .search ul li.tag .mouseover {
	display: none;
}
header .search ul li.tag a {
	color: #fff;
}
header .search ul li.icon {
	border-left: 1px solid #c8c8c8;
	border-right: 1px solid #c8c8c8;
	height: 30px;
	width: 55px;
	margin: 22px 0 0 10px;
	line-height: 30px;
}
header .search ul li.icon img {
	width: 14px;
	display: block;
	margin: 8px auto 0;
}

/*---search-layer---*/
.search-layer {
	display: none;
	background: #2a2a2a;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
}
.search-layer .close {
	width: 45px;
	position: absolute;
	right: 30px;
	top: 30px;
	cursor: pointer;
}
.search-layer .search-wraper {
	border-bottom: 2px solid #fff;
	width: 46%;
	margin: 18% auto 40px;
	padding: 0px 0 10px 20px;
}
.search-layer .search-site {
	width: 36px;
    vertical-align: middle;
    margin-right: 20px;
    cursor: pointer;
}
.search-layer .search-input {
	background: #2a2a2a;
    color: #fff;
    border: none;
    outline: none;
    padding: 5px;
    vertical-align: middle;
    height: 26px;
    line-height: 26px;
    font-size: 18px;
    letter-spacing: 2px;
}
.search-layer .tag-wraper {
	width: 46%;
	margin: 0 auto;
	padding-left: 20px;
}
.search-layer .tag-wraper .tag {
	font-size: 14px;
	line-height: 14px;
	position: relative;
	display: inline-block;
    padding: 5px 5px 5px 8px;
    background: #e0e0e0;
    color: #2a2a2a;
    cursor: pointer;
}
.search-layer .tag-wraper .tag::before {
	content: '';
	position: absolute;
	width: 0px;
	height: 0px;
	border-top: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 14px solid #e0e0e0;
	border-left: 14px solid transparent;
	right: -14px;
	top: -4px;
}
.search-layer .tag-wraper .tag::after {
	content: '';
	position: absolute;
	width: 0px;
	height: 0px;
	border-top: 14px solid #e0e0e0;
	border-right: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 14px solid transparent;
	right: -14px;
	top: 0px;
}
.search-layer .tag-wraper ul {
	margin-top: 30px;
}
.search-layer .tag-wraper ul li {
	float: left;
	margin-right: 25px;
	margin-bottom: 25px;
}
.search-layer .tag-wraper ul li a {
	font-size: 16px;
	color: #fff;
	letter-spacing: 2px;
}
.search-layer .tag-wraper ul li a:hover {
	color: #d20038;
}

.search-layer .tag-wraper.search-tag-wraper{
	display: inline-block;
	width: auto;
	padding-left: 0;
	margin-right: 20px;
}

/*---footer---*/
footer {
	position: fixed;
	width: 100%;
	height: 66px;
	bottom: 0;
	background: #131313;
	text-align: center;
	z-index: 99;
}
footer .lang {
	float: left;
	width: 85px;
	line-height: 66px;
	margin-left: 20px;
	text-align: left;
}
footer .lang a {
	color: #9a9a9a;
	font-weight: 600;
	font-size: 13px;
}
footer .lang a.actived {
	color: #fff;
}
footer .lang span {
	color: #fff;
	font-size: 13px;
}
footer .declare {
	float: right;
	width: auto;
	line-height: 66px;
	margin-right: 20px;
	text-align: right;
}
footer .declare a, footer .declare span {
	color: #fff;
	font-size: 13px;
}
footer .hakuhodo-logo-footer{
	float: left;
	margin: 10px 0;
}
footer .hakuhodo-logo-footer img{
	height: 46px;
}

footer .beian{
	text-align: center;
	display: inline-block;
    line-height: 66px;
}
footer .beian a, footer .beian a:visited{
	color: #fff;
	font-size: 13px;
	vertical-align: middle;
}
footer .beian-gaj{
	margin-left: 10px;
}
footer .beian-gaj *{
	vertical-align: middle;
}
footer .beian-gaj img{
	width: 1.2em;
}

/*---common---*/
.main {
	float: left;
	width: 100%;
}
.kv {
	position: relative;
	line-height: 0;
	overflow: hidden;
}
.kv img {
	width: 100%;
}
.kv .title {
	position: absolute;
	font-size: 28px;
	line-height: 36px;
	display: block;
	width: 100%;
	letter-spacing: 6px;
	text-align: center;
	top: 50%;
	margin-top: -14px;
	color: #fff;
	font-weight: 400;
}


.article-tag {
	float: left;
	font-size: 12px;
	line-height: 14px;
	position: relative;
	display: inline-block;
    padding: 3px 5px 3px 5px;
    letter-spacing: 1px;
    background: #fff;
    margin-right: 15px;
    color: #2a2a2a;
}
.article-tag::before {
	content: '';
	position: absolute;
	width: 0px;
	height: 0px;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #fff;
	border-left: 10px solid transparent;
	right: -10px;
	top: 0;
}
.article-tag::after {
	content: '';
	position: absolute;
	width: 0px;
	height: 0px;
	border-top: 10px solid #fff;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
	right: -10px;
	top: 0;
}
.article-tag.black {
	 background: #4e4e4e;
	 color: #fff;
}
.article-tag.black::before {
	border-bottom: 10px solid #4e4e4e;
}
.article-tag.black::after {
	border-top: 10px solid #4e4e4e;
}

.content .download-btn {
	float: left;
	width: 410px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	display: block;
	background: #b70031;
	color: #fff;
	font-size: 13px;
}
.content .download-btn:hover {
	background: #4e4e4e;
}
.content .download-btn img {
	width: 14px;
	height: 16px;
	vertical-align: text-bottom;
	margin: 0;
	margin-right: 10px;
	display: inline-block;
}
.content p {
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 2px;
	text-indent: 32px;
	text-align: justify;
}
.content p.mb30 img{
	width: auto;
	max-width: 60%;
}
.content p.mb30.content-img{
	text-align: center;
	text-indent: 0;
}
.jp-content p {
	text-indent: 16px;
}


/*---不同尺寸的PC版微调---*/
@media only screen and (min-width: 1070px) and (max-width: 1280px) 
{
	header .pc-inner {
		width: 980px;
	}
	header .navbar-wraper {
		width: 56%;
		width: 70%;
	}
	header .navbar-nav {
		width: 600px;
		width: 100%;
	}
	header .navbar-nav > li {
		margin-right: 40px;
		margin-right: 5%;
	}
	header .search {
		width: 44%;
		max-width: 30%;
	}
}

@media only screen and (min-width: 860px) and (max-width: 1170px) 
{
	header .search ul {
		margin-left: 20px;
		margin-left: 0;
	}
	header .search ul li.key4 {
		display: none;
	}
}

@media only screen and (min-width: 860px) and (max-width: 1070px) 
{
	header .pc-inner {
		width: 760px;
	}
	header .navbar-wraper {
		width: 60%;
		width: 75%;
	}
	header .navbar-nav {
		width: 500px;
		width: 100%;
	}
	header .navbar-nav > li {
		margin-right: 10px;
		margin-right: 5%;
	}
	header .search {
		width: 40%;
		width: 25%;
	}
	header .search ul {
		margin-left: 20px;
		margin-left: 0;
	}
	header .search ul li.key3 {
		display: none;
	}
}
@media only screen and (min-width: 860px) and (max-width: 970px) 
{
	header .search ul {
		margin-left: 30px;
		margin-left: 0;
	}
	header .search ul li.key2 {
		display: none;
	}
}


@media only screen and (max-width: 1070px) {
	header .navbar-download{width: 115px;}
	header .search ul li.tag{width: 75px;}
}
/*---sp版---*/
@media only screen and (max-width: 860px) 
{
	.pc-only {display: none;}
	.sp-only {display: block;}
	.inner {
		width: 88%;
		margin: 0 6%;
	}
	header .logo{
		display: block;
		height: 64px;
	}
	header .pc-inner {
		width: 100%;
	}
	header .logo .pc-inner a{
		display: block;
		overflow: hidden;
		margin-left: 6%;
		width: 196px;
	}
	header .logo .left {
		height: 18px;
		margin: 23px 0 0 0;
	}
	header .logo .right {
		height: 24px;
		float: left;
		margin: 10px 0 0 0;
	}
	header .logo .pc-inner .sp-no-logo{
		display: none;
	}
	header .navbar {
		height: 0;
		background: #fff;
		position: relative;
	}
	header .navbar-header {
		float: left;
		width: 22px;
		position: absolute;
		top: -40px;
		right: 6%;
		text-align: center;
	}
	header .navbar-collapse {
		width: 22px;
		float: left;
		margin: 0 0 0 0;
		vertical-align: top;
	}
	header .navbar-collapse.close {
		display: none;
	}
	header .navbar-brand {
		float: right;
		margin: 18px 0;
	}
	header .navbar-brand img {
		width: 136px;
		vertical-align: top;
	}
	header .navbar-wraper {
		width: 100%;
		position: absolute;
		z-index: 100;
		top: 0;
		display: none;
	}
	header .navbar-tool {
		background: #4a4a4a;
		float: left;
		width: 100%;
	}
	header .navbar-search {
		float: left;
		width: 17px;
		margin: 20px 0 20px 6%;
	}
	header .navbar-lang {
		float: right;
		padding: 18px 15px;
		border-left: 1px solid #5d5d5d;
	}
	header .navbar-lang a {
		color: #9a9a9a;
   		font-weight: 600;
    	font-size: 14px;
    	line-height: 18px;
	}
	header .navbar-lang a.actived {
		color: #fff;
	}
	header .navbar-lang span {
		color: #fff;
    	font-size: 14px;
    	line-height: 18px;
	}
	header .navbar-nav {
		width: 100%;
		float: left;
		background: #f1f1f1;
		height: 680px;
		min-height: 680px;
	}
	header .navbar-nav > li {
		width: 100%;
		text-align: left;
		box-sizing: border-box;
		padding: 0 6%;
		line-height: 60px;
		border-bottom: 1px solid #cbcbcb;
		float: none;
    	height: auto;
	}
	header .navbar-nav .sp-home {
		display: block;
	}
	header a.parent {
		font-weight: 600;
	}
	header .sub-menu-collapse {
		width: 17px;
		position: absolute;
		right: 6%;
		top: 26px;
	}
	header .sub-menu-collapse.up {
		display: none;
	}
	header .dropdown-menu {
		width: 100%;
		position: relative;
		left: 0;
		top: 0;
	}
	header .dropdown-menu li {
		background: none;
		border: none;
	}
	header .dropdown-menu li a {
		color: #4a4a4a;
		width: 100%;
		font-size: 13px;
		height: 36px;
		line-height: 36px;
		text-align: left;
	}
	header .dropdown-menu::before {
		content: none;
	}
	header .navbar-nav li:hover .parent, header .navbar-nav .actived .parent {
		color: #110603;
		border-bottom: 1px solid #525252;
	}
	
	.kv .title {
		font-size: 20px;
		line-height: 22px;
	}
	.article-tag {
		font-size: 10px;
	}
	.content .download-btn {
		height: 44px;
		line-height: 44px;
		font-size: 10px;
	}
	.content p {
		font-size: 12px;
	    line-height: 22px;
	    text-indent: 28px;
	}
	.jp-content p {
	    text-indent: 14px;
	}
	
	footer {
		height: auto;
		position: relative;	
		float: left;
	}
	footer .logo {
		float: left;
		margin-left: 6%;
		font-size: 0;
		padding-top: 20px;
	}
	footer .logo img{
		height: 23px;
	}
	footer .hakuhodo-logo-footer {
		margin: 20px 0 0 6%;
	}
	footer .hakuhodo-logo-footer img {
		height: 23px;
	}
	footer .logo .icon {
		width: 9px;
		display: inline-block;
		margin-right: 9px;
		vertical-align: baseline;
		margin-top: 21px;
	}
	footer .logo .icon1 {
		width: 9px;
		height: 9px;
		background: #fff;
		display: inline-block;
		margin-bottom: 8px;
	}
	footer .logo .icon2 {
		width: 9px;
		height: 9px;
		background: #fff;
		display: inline-block;
	}
	footer .logo .text {
		font-size: 12px;
		color: #fff;
		vertical-align: baseline;
		line-height: 12px;
    	display: inline-block;
	}
	footer .declare {
		width: auto;
		margin-right: 6%;
		line-height: 12px;
		margin-top: 25px;
	}
	footer .declare a, footer .declare span {
		font-size: 10px;
		line-height: 10px;
		display: inline-block;
	}

	
	footer .beian{
		text-align: center;
		display: block;
		margin-top: 5px;
		width: 100%;
		float: left;
	}
	footer .beian a, footer .beian a:visited{
		color: #fff;
		font-size: 10px;
		line-height:1.5em;
		vertical-align: middle;
	}
	footer .beian-gaj *{
		vertical-align: middle;
	}
	footer .beian-gaj img{
		width: 1.2em;
	}
	
	
	header .navbar-nav > li.download-tag-menu{
		border: none;
		margin-top: 30px;
	}
	.download-tag-menu .navbar-download {
		margin-top: 0;
		width: 100%;
	}
	.download-tag-menu .search{
		width: 100%;
		max-width: 100%;
		float: none;
		display: flex;
		flex-direction: column;
		gap: 15px;
		align-items: center;
		justify-content: center;
	}
	header .search ul li.tag{
		margin-top: 0;
	}
	
	.search-layer .search-wraper,.search-layer .tag-wraper{
		width: 84%;
		padding-left: 0;
	}
	.search-layer .close{
		width: 30px;
	}
}
@media only screen and (max-width: 340px) 
{
	footer .hakuhodo-logo-footer {
		margin: 20px 0 0 1%;
	}
	footer .hakuhodo-logo-footer img {
		height: auto;
		width: 80px;
	}
	footer .logo img {
		height: 22px;
	}
}