@charset "utf-8";

/*=================================================
 file name: page-layout.css
 release: 2015.10.15
 updated: 2016.2.18
===================================================*/

body {
	padding: 0;
	color: #444;
	font-family: Meiryo,"メイリオ","MS Pゴシック Ex+","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Osaka,arial,helvetica,sans-serif;
	font-size: 13px;
	line-height: 1;
}
@media (max-width: 767px) {
	body {
		font-size: 16px;
	}
}

#sb-site {
	background: url(/common/images/n8_hd_line.jpg) 0 0 repeat-x;
}
a:link {	color:#0f78d7; text-decoration: none; }
a:visited {color:#784078; text-decoration: none; }
a:active {	color:#C00; text-decoration: underline}
a:hover {	color:#C00; text-decoration: underline}

.wrapper {
	max-width: 920px;
}
@media screen and (max-width: 919px) {
	.wrapper {
		width: 98%;
		margin: 0 auto;
		padding-left: 15px;
		padding-right: 15px
	}
}
.wrapper {
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
.wrapper:before,
.wrapper:after {
	display: table;
	content: " ";
}
.wrapper:after {
	clear: both;
}
.wrapper {
	*zoom: 1;
}

/* メニューで使用するリストタグのリセット */
header ul, header li,
footer ul, footer li,
.products-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ページトップに戻る */
.go-pagetop {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 9999;
}
.go-pagetop a {
	display: block;
	background-color: rgba(0,0,0,0.6);
	border-radius: 3px;
	padding: 2px 8px;
	font-size: 20px;
	color: #fff;
}
@media (max-width: 767px) {
	.go-pagetop a {
		padding: 4px 16px;
	}
}

.clear {	clear: both;}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

/*調整用 class*/
.pt5{
	padding-top: 5px !important;
}
.pt10{
	padding-top: 10px !important;
}
.pt15{
	padding-top: 15px !important;
}
.mt5{
	margin-top: 5px !important;
}
.mt10{
	margin-top: 10px !important;
}
.mt15{
	margin-top: 15px !important;
}
.mt20{
	margin-top: 20px !important;
}
.mt25{
	margin-top: 25px !important;
}
.mt30{
	margin-top: 30px !important;
}
@media screen and (min-width: 768px) {
	.visible-xs {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.visible-xs {
		display: block;
	}
}

@media screen and (max-width: 767px) {
	.sp-text-center {
		text-align: center;
	}
	.visible-pc {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	.pc-text-center {
		text-align: center;
	}
	.visible-sp {
		display: none;
	}
}

/* ====================================================================
 header
------------------------------------------*/
header {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+80,efefef+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 80%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(80%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 80%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 80%,#efefef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 80%,#efefef 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 80%,#efefef 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
	width: 100%;
	margin: 6px auto 10px;
	padding-top: 12px;
	padding-bottom: 10px;
	position: relative;
}
header .company-logo {
	position: absolute;
	top: 0;
	right: 0;
}
header .site-logo {
	position: absolute;
	top: 11px;
	left: 2px;
}
@media screen and (max-width: 767px) {
	header {
		height: 50px;
		margin-bottom: 0;
		padding-top: 0;
	}
	header .site-logo {
		position: relative;
		margin-top: 3px;
	}
	header .site-logo img {
		display: block;
		margin: 0 auto;
	}
	header .sp-nav-opener {
		position: absolute;
		top: 12px;
		left: 0;
		font-size: 27px;
		color: #ff0000;
		z-index: 9999;
		cursor: pointer;
	}
}

/* .utility-menu
------------------------------------------*/
.utility-menu {
	position: absolute;
	top: 20px;
	right: 3px;
}
.utility-menu li {
	display: inline-block;
	margin-right: 14px;
}
.utility-menu li:last-child{
	margin-right: 0;
}
.utility-menu li a {
	font-size: 13px;
	color: #333;
}
.utility-menu li a:hover{
	text-decoration: none;
	opacity: 0.6;
}
.utility-menu li:before{
	content: '\0025b6\0020';
	color: #D00;
	font-size: 8px;
}
.utility-menu li:hover:before{
	opacity: 0.4;
}

/* .global-navi
------------------------------------------*/
.global-navi {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	width: 920px;
	max-width: 100%;
	margin: 47px auto 0;
}
.global-navi li {
	border-right: solid 1px #fff;
	max-width: 183px;
	width: 20%;
	height: 43px;
}
.global-navi li:last-child {
	border-right:none;
}
.global-navi li a {
	display: block;
	border-right: solid 1px #d5d5d5;
	height: 100%;
	padding: 9px 0 0 8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 14px;
	text-decoration: none;
	color: #555;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0f0+0,ffffff+50 */
	background: #f0f0f0; /* Old browsers */
	background: -moz-linear-gradient(top,  #f0f0f0 0%, #ffffff 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(50%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f0f0f0 0%,#ffffff 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f0f0f0 0%,#ffffff 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f0f0f0 0%,#ffffff 50%); /* IE10+ */
	background: linear-gradient(to bottom,  #f0f0f0 0%,#ffffff 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.global-navi li a.active,
.global-navi li a:hover {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1d9d9+0,fdf8f8+100 */
	background: #f1d9d9; /* Old browsers */
	background: -moz-linear-gradient(top,  #f1d9d9 0%, #fdf8f8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1d9d9), color-stop(100%,#fdf8f8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f1d9d9 0%,#fdf8f8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f1d9d9 0%,#fdf8f8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f1d9d9 0%,#fdf8f8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f1d9d9 0%,#fdf8f8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1d9d9', endColorstr='#fdf8f8',GradientType=0 ); /* IE6-9 */
}
.global-navi li a:before {
	content: '';
	display: block;
	background: url(/common/css/images/fig_global-navi.png) no-repeat 0 0;
	width: 12px;
	height: 33px;
	margin-top: -3px;
	float: left;
}
.global-navi li a span {
	display: block;
	font-size: 10px;
	font-weight: normal;
}
@media (max-width: 1023px) {
	.global-navi li a span {
		font-size: 9px;
	}
}

.global-navi li.home a {
	-webkit-border-radius: 20px 0 0 20px;
	-moz-border-radius: 20px 0 0 20px;
	border-radius: 20px 0 0 20px;
	padding-left: 20px;
	line-height: 28px;
}
.global-navi li:last-child a {
	-webkit-border-radius: 0 20px 20px 0;
	-moz-border-radius: 0 20px 20px 0;
	border-radius: 0 20px 20px 0;
	border-right: none;
}
@media screen and (max-width: 767px) {
	.global-navi {
		display: none;
	}
}



/* ====================================================================
 .sp-nav :: スマホ表示時のみのドロワーメニュー
------------------------------------------*/
.sp-nav {
	padding: 8px;
}
.sp-nav li {
	float: none;
	border-bottom: solid 1px #666;
	padding: 0;
	line-height: 40px;
}
.sp-nav li a {
	display: block;
	padding: 0 8px;
	color: #fff;
}
.sp-nav li a:hover {
	text-decoration: none;
}
.sb-close {
	margin-top: 10px;
	text-align: center;
	font-size: 18px;
	color: #fff;
	cursor: pointer;
}
.sb-close span:last-child {
	display: block;
	margin-top: 3px;
	font-size: 11px;
}



/* ====================================================================
 footer
------------------------------------------*/
footer {
	clear: both;
	background: #eee;
	margin-top: 10px;
	padding: 0 0 30px;
	text-align: center;
	line-height: 1.5;
	font-size: 12px;
}
footer .footer-menu {
	text-align: center;
}
@media (min-width: 768px) {
	footer .footer-menu li {
		display: inline;
		border-left: solid 1px #999;
		margin-left: 0.8em;
		padding-left: 0.8em;
	}
	footer .footer-menu li:first-child {
		border-left: none;
		margin-left: 0;
		padding-left: 0;
	}
}
footer .footer-info {
	margin-top: 12px;
	text-align: center;
}
footer address {
	font-style: normal;
}
@media (min-width: 768px) {
	footer {
		padding-top: 15px;
		font-size: 11px;
	}
	footer address {
		display: inline;
		padding-right: 2em;
	}
}

footer .sp-mega-menu {
	display: table;
	width: 100%;
	margin: 0 0 20px;
}
footer .sp-mega-menu .table-row {
	display: table-row;
}
footer .sp-mega-menu li {
	display: table-cell;
	width: 50%;
	border: solid 1px #999;
	background-color: rgba(0,0,0,0.5);
	vertical-align: middle;
}
footer .sp-mega-menu li span {
	display: block;
}
footer .sp-mega-menu li a {
	display: block;
	padding: 5px 0;
	color: #fff;
}
@media (min-width: 768px) {
	footer .sp-mega-menu {
		display: none;
	}
}

footer .company-logo {
	width: 40%;
	margin: 0 auto 10px;
}



/* ====================================================================
 aside
------------------------------------------*/
aside {
	max-width: 300px;
	width: 30%;
	float: right;
}
@media screen and (max-width: 767px) {
	aside {
		float: none;
		width: 100%;
		max-width: 100%;
	}
}

.banner-area h4 {
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
.banner-area dl {
	display: table;
	width: 100%;
}
@media (min-width: 768px) {
	.banner-area dl.bnr-twitter {
		display: none;
	}
}
@media (max-width: 767px) {
	.banner-area dl {
		margin-bottom: 10px;
	}
}
.banner-area dt,
.banner-area dd {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	padding: 10px 0;
	border: none;
	line-height: 1.3;
}
.banner-area dt {
	width: 100px;
	text-align: right;
	padding: 10px 16px;
}
@media (max-width: 767px) {
	.banner-area dt {
		width: 120px;
	}
}
.bnr-youtube a {
	display: block;
	border: solid 1px #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #666;
}
.bnr-youtube a:hover {
	background-color: #efefef;
	text-decoration: none;
}
.bnr-twitter a {
	display: block;
	background-color: #55acee;
	border: solid 1px #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
}
.bnr-twitter a:hover {
	text-decoration: none;
}
.bnr-youtube img {
	width: 40px;
	height: auto;
}
.bnr-twitter img {
	width: 34px;
	height: auto;
	margin-right: 3px;
}

.atokcom-tww {
	background: #e5e5e5;
	border: solid 1px #e5e5e5;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin: 15px 0;
}
.atokcom-tww h4 {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}
@media (max-width: 767px) {
	.atokcom-tww {
		display: none;
	}
	.banner-area {
		/*display: table;*/
		width: 100%;
	}
	.banner-area div {
		/*display: table-cell;*/
		/*width: 50%;*/
		/*text-align: center;*/
	}
	.banner-area div img {
		width: 60px;
		height: auto;
	}
}



/* ====================================================================
 .contents-area
------------------------------------------*/
.contents-area {
	width: 68%;
	max-width: 610px;
	float: left;
}
.contents-area > .container {
	margin-right: -0.5rem;
	margin-left: -0.5rem;
}
@media screen and (max-width: 767px) {
	.contents-area {
		width: 100%;
		max-width: 100%;
		float: none;
	}
	.contents-area > .container {
		padding-right: 0;
		padding-left: 0;
	}
}
/* 1カラム表示の場合 */
.container.cover-full {
	margin-right: -0.5rem;
	margin-left: -0.5rem;
}



/* ====================================================================
 index.html
------------------------------------------*/
.image-area {
	margin-bottom: 50px;
}
.image-area a:focus img {
	border: none;
}
@media screen and (max-width: 767px) {
	.image-area {
		background-color: #fff;
		border: none;
		padding: 0;
	}
}

/*.banner-area-top {
	padding-top: 2px;
}
.banner-area-top img {
	width: 100%;
	height: auto;
}
@media screen and (max-width: 767px) {
	.banner-area-top {
		display: none;
	}
}
.banner-area-bottom {
	clear: both;
	margin-top: 10px;
}
.banner-area-bottom img {
	display: block;
	margin: 0 auto;
}*/

.status {
	margin-bottom: 20px;
}
.status ul {
	padding: 0;
}
.status ul li {
	padding: 5px 0;
	list-style: none;
}
.status ul li:last-child {
}

.panel {
	position: relative;
}
#news.panel {
	padding-top: 0;
}
#news.panel ul {
	padding: 0;
}
#news.panel li {
	padding: 5px 0;
	list-style: none;
}
#news.panel li .date {
	padding-right: 0.8em;
}
@media (max-width: 767px) {
	.panel {
		margin-bottom: 20px;
	}
	#news.panel li {
		line-height: 1.4;
	}
	#news.panel li .date {
		display: block;
		font-size: 0.8em;
	}
}
.panel .tag-new {
	position: absolute;
	top: 8px;
	right: 7px;
}
.panel-body h2 {
	font-size: 16px;
	margin: 0 0 5px;
	padding: 0 3px 3px;
	font-weight: bold;
	color: #717f8d;
	border-bottom: 1px solid #717f8d;
}
.panel-body p {
	margin-bottom: 0.7em;
	font-size: 12px;
	line-height: 18px;
}

.win10-label a {
	display: block;
	background-color: #337ab7;
	color:#fff !important;
	padding:2% 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width:100%;
	margin: 0 auto;
	text-align: center;
}
.win10-label a:hover {
	text-decoration: none;
	opacity: 0.6;
}
.osx-label a {
	display: block;
	background-color: #fff;
	border: solid 1px #D4071D;
	color:#D4071D !important;
	padding:2% 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width:100%;
	margin: 0 auto;
	text-align: center;
	color:#D4071D;
}
.osx-label a:hover {
	background-color: #D4071D;
	text-decoration: none;
	color: #fff!important;
}
@media (max-width: 767px) {
	.win10-label,
	.osx-label {
		width: 80%;
		min-width: 280px;
		margin: 0 auto;
	}
}

/* .products-menu
------------------------------------------*/
@media (max-width: 767px) {
	.products-menu {
		width: 80%;
		min-width: 280px;
		margin: 0 auto;
		padding-right: 0;
		padding-left: 0;
	}
}
.products-menu li {
	margin: 10px auto 0;
}
.products-menu li .glyphicon {
	margin-right: 5px;
}
.products-menu li .note-text {
	display: block;
	margin: 8px 0 3px;
	font-size: .8em;
	text-indent: -1em;
	padding-left: 1em;
}
.products-menu li a {
	display: block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 10px 2px;
	text-align: center;
	color: #fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7f8d9a+0,6c7986+100 */
	background: #7f8d9a; /* Old browsers */
	background: -moz-linear-gradient(top,  #7f8d9a 0%, #6c7986 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f8d9a), color-stop(100%,#6c7986)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #7f8d9a 0%,#6c7986 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #7f8d9a 0%,#6c7986 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #7f8d9a 0%,#6c7986 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #7f8d9a 0%,#6c7986 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f8d9a', endColorstr='#6c7986',GradientType=0 ); /* IE6-9 */
}
.products-menu li a:hover {
	opacity: 0.6;
	text-decoration: none;
}
@media (min-width: 1024px) {
	.products-menu .pc-br {
		display: block;
		padding-top: 2px;
		text-align: right;
	}
}

/* .img-package
------------------------------------------*/
.img-package {
	padding: 8px 0 0;
	text-align: center;
	line-height: 1.3;
}
.img-package img {
	display: block;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
	.img-package {
		width: 39%;
		font-size: 12px;
		float: left;
	}
	.products-menu {
		width: 60%;
		margin-right: -10px;
		padding: 15px 0 0 0;
		float: right;
	}
	.products-menu li {
		margin-top: 5px;
	}
	.products-menu li a {
		-webkit-border-radius: 5px 0 0 5px;
		-moz-border-radius: 5px 0 0 5px;
		border-radius: 5px 0 0 5px;
		padding: 6px 10px;
		text-align: left;
	}
	.products-menu li a.long-text {
		padding-left: 27px;
	}
	.products-menu li .long-text .glyphicon {
		margin-left: -17px;
	}
}

/* .campaign-area
------------------------------------------*/
.campaign-area a {
	display: block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-bottom: 6px;
	padding: 5px 8px 3px;
	line-height: 1.3;
	text-align: center;
	color: #fff;
}
.campaign-area a:hover {
	opacity: 0.6;
	text-decoration: none;
}
.campaign-area.orange a {
	background: #ffa22a;
}
.campaign-area.green a {
	background: #81B503;
}
.campaign-area.blue a {
	background: #039AB5;
}

/* slick
------------------------------------------*/
@media screen and (min-width: 992px) {

.slide_item{
	position:relative;
}
.button_detail a,.button_buy a{
	color:#fff;
	padding:1% 3%;
	font-size:1rem;
	border-radius: 5px;
	z-index: 100;
	position:absolute;
	bottom:5%;

}
.button_detail a{
	background-color: #0068b6;
	left:32%;
}
.button_buy a{
	background-color: #f1c40f;
	background-color: #f1c40f; */
    color: #fff;
    white-space: normal;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #a50300), color-stop(0.00, #cf2420));
    background: -webkit-linear-gradient(top, #cf2420 0%, #a50300 88%);
    background: -moz-linear-gradient(top, #cf2420 0%, #a50300 88%);
    background: -o-linear-gradient(top, #cf2420 0%, #a50300 88%);
    background: -ms-linear-gradient(top, #cf2420 0%, #a50300 88%);
    background: linear-gradient(to bottom, #cf2420 0%, #a50300 88%);
    right: 3%;
    border-bottom: 1px #666 solid;
	right:32%;
}
.slide_item a:hover {
	opacity: 0.8;
	text-decoration: none;
}
	}

	@media screen and (max-width: 991px) {
	.slide_item{
		position:relative;
	}
	.button_detail a,.button_buy a,.button_detail-single a{
		color:#fff;
		padding:10px 15px;
		font-size:1rem;
		border-radius: 5px;
		z-index: 100;
		position:absolute;
		bottom:2%;
		margin:0 auto;
		width:45%;
		display:block;
		text-align: center;
	}
.button_detail a{
	background-color: #0068b6;
	left:3%;
}
.button_buy a{
	/*background-color: #f1c40f;*/
	    color: #fff;
    white-space: normal;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #a50300), color-stop(0.00, #cf2420));
    background: -webkit-linear-gradient(top, #cf2420 0%, #a50300 88%);
    background: -moz-linear-gradient(top, #cf2420 0%, #a50300 88%);
    background: -o-linear-gradient(top, #cf2420 0%, #a50300 88%);
    background: -ms-linear-gradient(top, #cf2420 0%, #a50300 88%);
    background: linear-gradient(to bottom, #cf2420 0%, #a50300 88%);
	right:3%;
	border-bottom: 1px #666 solid
}
.button_detail-single a{
	background-color: #0068b6;
	left: 27%;
}
.slide_item a:hover {
	opacity: 0.7;
		text-decoration: none;
	}
}
	@media screen and (max-width: 767px) {
	.slide_item{
		padding-bottom: 3em;
	}
}

/* slick[badge style]
------------------------------------------*/

@media only screen and (min-width: 768px) {
	.col-md-12 {	width: 100%}
	.col-md-11 {	width: 91.66666667%}
	.col-md-10 {	width: 83.33333333%}
	.col-md-9 {		width: 75%}
	.col-md-8 {		width: 66.66666667%}
	.col-md-7 {		width: 58.33333333%}
	.col-md-6 {		width: 50%}
	.col-md-5 {		width: 41.66666667%}
	.col-md-4 {		width: 33.33333333%}
	.col-md-3 {		width: 25%}
	.col-md-2 {		width: 16.66666667%}
	.col-md-1 {		width: 8.33333333%}
}
@media only screen and (max-width: 767px) {
	.col-xs-12 {	width: 100%}
	.col-xs-11 {	width: 91.66666667%}
	.col-xs-10 {	width: 83.33333333%}
	.col-xs-9 {		width: 75%}
	.col-xs-8 {		width: 66.66666667%}
	.col-xs-7 {		width: 58.33333333%}
	.col-xs-6 {		width: 50%}
	.col-xs-5 {		width: 41.66666667%}
	.col-xs-4 {		width: 33.33333333%}
	.col-xs-3 {		width: 25%}
	.col-xs-2 {		width: 16.66666667%}
	.col-xs-1 {		width: 8.33333333%}
}

.btn-img-warp{
	position: absolute;
	width: 100%;
	bottom: 8%
}
.btn-img-warp .btn-img-item{
	background-color: transparent;
	padding:0;
	color: transparent;
    padding:0;
    border-radius: 0
}
.btn-img-warp .btn-img-item img{
	max-height: 65px;
}
.btn-img-single{margin: 0 auto}
.f-right{
	float: right
}
@media only screen and (max-width: 767px) {
	.btn-img-warp{
	position: absolute;
	width: 100%;
	bottom: 0
}
	}


/* /try/index.html
------------------------------------------*/
.try-atok .image-area {
	position: relative;
}
.try-atok .image-area .text-box {
	/*background-color: rgba(0,0,0,.3);*/
	padding: .5em .5rem;
	z-index: 100;
	color: #000;
}
@media screen and (min-width: 1024px) {
	.try-atok .image-area .text-box {
		border-radius: 5px;
		padding: 15px 20px 15px;
		position: absolute;
		width: 350px;
		top: 120px;
		left: 285px;
		color: #000;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.try-atok .image-area .text-box {
		border-radius: 5px;
		padding: 10px 20px 15px;
		position: absolute;
		width: 46%;
		bottom: 30px;
		left: 27%
	}
}

.try-atok .image-area .text-box h2 {
	margin-bottom: .2em;
	font-size: 18px;
	text-align: center;
}
.try-atok .image-area .text-box p {
	line-height: 1.5;
	font-size: 14px;
	margin-bottom: .5em;
}
@media screen and (min-width: 768px) {
	.try-atok .image-area .text-box h2 {
		font-size: 36px;
	}
	.try-atok .image-area .text-box p {
		line-height: 1.8;
		margin-bottom: .5em;
	}
}
a.button {
	display: block;
	background-color: #22b14c;
	border: solid 1px #fff;
	padding: .5em 1em;
	color: #fff;
	text-align: center;
}
ul.slick-dots{
	bottom: -35px
}

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

.line-left {
	width: 313px !important;
	float: left !important;
}

}

.line-left {
	 width: 100%;
	 float: none;
}