@import "base.less";

.qa-content{
	padding: 15px 0;

	.q-word{
		color: rgba(255, 255, 255, 0.8);
		position: relative;
		line-height: 20px;
		background-color: rgba(255, 255, 255, 0.1);
		padding: 15px 25px 15px 15px;
		margin: 0 0 1px;

		.arrow{
			display: block;
			position: absolute;
			width: 18px;
			height: 18px;
			background-repeat: no-repeat;
			background-size: cover;
			right: 10px;
			top: 50%;
			margin-top: -9px;
		}
	}

	.hide .arrow{
		background-image: url('img/qa/code@2x.png');
	}

	.show .arrow{
		background-image: url('img/qa/code_down@2x.png');
	}

	.a-word{
		color: rgba(255, 255, 255, 0.5);
		margin: 0;
		display: none;
		padding: 20px;
		line-height: 23px;
		background-color: @backgroundColor;
	}

	.mail-to{
		color: rgba(255, 255, 255, 0.8);
		text-align: center;
		line-height: 26px;

		a{
			color: rgba(255, 255, 255, 0.8);
			text-decoration: underline;
		}
	}
}

@media screen and (min-width: 768px) {

	.qa-content{
		padding: 30px 0;
		font-size: 20px;

		.q-word{
			line-height: 45px;
			padding: 15px 60px 15px 30px;
			margin: 0 0 2px;

			.arrow{
				width: 35px;
				height: 35px;
				right: 20px;
				margin-top: -17px;
			}
		}

		.hide .arrow{
			background-image: url('img/qa/code@2x.png');
		}

		.show .arrow{
			background-image: url('img/qa/code_down@2x.png');
		}

		.a-word{
			padding: 30px 60px;
			line-height: 30px;
		}

		.mail-to{
			line-height: 52px;
		}
	}

}