@charset "UTF-8";

/*----------------------------------
container
----------------------------------*/
@media (max-width: 767px){
	.container{
		padding-right : calc( 30 * 100% / 640 );
		padding-left : calc( 30 * 100% / 640 );
	}
	.container .row{
		margin-right : calc( -30 * 100% / 580 );
		margin-left : calc( -30 * 100% / 580 );
	}
	.container-fluid{
		padding-right : 0;
		padding-left : 0;
	}
	.container-fluid .row{
		margin-right : 0;
		margin-left : 0;
	}
	.row .row{
		margin-left : 0;
		margin-right : 0;
	}
	.col-xs-12{
		padding-right : calc( 30 * 100% / 640 );
		padding-left : calc( 30 * 100% / 640 );
	}
}
@media (min-width: 768px){
	.row .row{
		margin-left : 0;
		margin-right : 0;
	}
}
/*----------------------------------
Btn
----------------------------------*/

.btn.btn-banok{
	position : relative;
	font-family : Arial;
	font-weight : 700;
	background-color : transparent;
	border-style : solid;
	border-width : 1px;
	line-height : 60px;
	display : block;
	padding : 0;
	border-radius : 0;
	z-index : 1;
	margin-left : auto;
	margin-right : auto;
}
@media (max-width: 639px){
	.btn.btn-banok{
		font-size : 12px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	.btn.btn-banok{
		font-size : 25px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	.btn.btn-banok{
		font-size : 25px;
	}
}
@media ( min-width: 992px){
	.btn.btn-banok{
		font-size : 22px;
	}
}
@media ( min-width: 992px){
	.btn.btn-banok:after{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		background-color : #001345;
		width : 0;
		height : 100%;
		transition : all .3s;
		content : "";
		color : #fff;
	}
	.btn.btn-banok:hover{
		color : #fff;
		transition : all .3s;
		border-color : #001345;
	}
	.btn.btn-banok:hover:after{
		width : 100%;
		transition : all .3s;
	}
}
.btn.btn-ghost{
	font-family : Arial;
	color : #fff;
	font-size : 22px;
	font-weight : bold;
	border-style : solid;
	border-width : 1px;
	border-color : #fff;
	box-sizing : border-box;
	background-color : rgba(0, 0, 0, 0);
	border-radius : 0;
	padding : 0;
}
.btn.btn-more , .btn.btn-toPin{
	border-style : solid;
	border-width : 1px;
	border-color : #061638;
	box-sizing : border-box;
	background-color : transparent;
	border-radius : 0;
	font-family : "Montserrat";
	color : #1f1f1f;
	font-size : 20px;
	font-weight : 400;
	position : relative;
	z-index : 1;
	display : -webkit-inline-box;
	display : inline-flex;
	-webkit-box-align : center;
	align-items : center;
	-webkit-box-pack : center;
	justify-content : center;
}
@media ( min-width: 992px){
	.btn.btn-more:after{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		background-color : #001345;
		width : 0;
		height : 100%;
		transition : all .3s;
		content : "";
		color : #fff;
	}
	.btn.btn-more:hover , .btn.btn-toPin:hover{
		border-color : #061638;
		background-color : #061638;
		color : #fff;
		transition : all .3s;
	}
	.btn.btn-more:hover:after{
		width : 100%;
		transition : all .3s;
	}
}
@media (max-width: 639px){
	.btn.btn-collaplse{
		height : 35px;
		line-height : 35px;
		font-size : 16px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	.btn.btn-collaplse{
		height : 70px;
		line-height : 70px;
		font-size : 32px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	.btn.btn-collaplse{
		height : 70px;
		line-height : 70px;
		font-size : 32px;
	}
}

.btn.btn-collaplse{
	background-color : #828282;
	width : 100%;
	font-family : "Montserrat";
	font-weight : 400;
	color : #f3f3f3;
	padding : 0;
	border : 0;
	border-radius : 0;
	position : relative;
	-webkit-transform-origin : center center;
	        transform-origin : center center;
}

.btn.btn-collaplse:after{
	content : "";
	border : 0;
	-webkit-transform : rotate(135deg);
	        transform : rotate(135deg);
	-webkit-transform-origin : center;
	        transform-origin : center;
	position : absolute;
	top : 50%;
	width : 10px;
	height : 10px;
	border-top : solid 1px #fff;
	border-right : solid 1px #fff;
	right : calc( 24 * 100% / 260 );
	margin-top : -7.5px;
}

.btn.btn-collaplse.open:after{
	-webkit-transform : rotate(315deg);
	        transform : rotate(315deg);
	margin-top : -2.5px;
}
/*----------------------------------
mv
----------------------------------*/
body:not(.top) #mv{
	width : 100%;
	background-repeat : no-repeat;
}
body:not(.top) #mv h2{
	font-family : "Montserrat";
	font-weight : 300;
	color : #f4f5f4;
	text-align : center;
}
@media (max-width: 639px){
	body:not(.top) #mv h2{
		font-size : 24px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	body:not(.top) #mv h2{
		font-size : 48px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	body:not(.top) #mv h2{
		font-size : 48px;
	}
}
@media ( max-width: 991px){
	body:not(.top) #mv .col-xs-12{
		position : relative;
		width : 100%;
		background-position : center center;
		background-size : cover;
	}
	body:not(.top) #mv .col-xs-12:before{
		content : "";
		display : block;
		padding-top : calc( 240 * 100% / 640 );
	}
	body:not(.top) #mv .col-xs-12 h2{
		position : absolute;
		top : 0;
		left : 0;
		bottom : 0;
		right : 0;
		height : 100%;
		display : -webkit-box;
		display : flex;
		-webkit-box-align : center;
		align-items : center;
		-webkit-box-pack : center;
		justify-content : center;
	}
}
@media ( min-width: 992px){
	body:not(.top) #mv .col-xs-12{
		width : 100%;
		height : 240px;
		background-position : center top;
	}
	body:not(.top) #mv .col-xs-12 h2{
		font-size : 48px;
		line-height : 240px;
		text-align : center;
	}
}

/*----------------------------------
product left column and right column table
----------------------------------*/
#product .carousel , #fastenerList .carousel{
	width : 100%;
}
#product .carousel .item img , #fastenerList .carousel .item img{
	width : 100%;
	height : auto;
}
#product .carousel .iframe-content , #fastenerList .carousel .iframe-content{
	position : relative;
	padding : 100% 0 0;
}
#product .carousel .item iframe , #fastenerList .carousel .item iframe{
	width : 100%;
	position : absolute;
	border : 0;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
}
#product .article-slide .carousel-indicators , #fastenerList .article-slide .carousel-indicators{
	width : 100%;
	position : static;
}
#product .article-slide .carousel-indicators li , #fastenerList .article-slide .carousel-indicators li{
	text-indent : 0;
	display : block;
	height : auto;
	margin : 0;
	border : 0;
}
#product .article-slide .carousel-indicators li:nth-child( n + 3 ) , #fastenerList .article-slide .carousel-indicators li:nth-child( n + 3){
	margin-top : 11px;
}
#product .article-slide .carousel-indicators img , #product .article-slide .carousel-indicators .active img , #fastenerList .article-slide .carousel-indicators img , #fastenerList .article-slide .carousel-indicators .active img{
	border : 0;
	opacity : 1;
	width : 100%;
	height : auto;
	outline : none;
}
#product .carousel-control , #fastenerList .carousel-control{
	text-shadow : none;
	bottom : 0;
	font-size : 0;
	text-shadow : none;
	background : none;
	filter : alpha(opacity=100);
	opacity : .5;
}
#product .carousel-control img , #fastenerList .carousel-control img{
	width : 100%;
	height : auto;
}
#product table , #fastenerList table{
	width : 100%;
}
#product table caption , #fastenerList table caption{
	font-family : "Montserrat";
	font-weight : 600;
}
#product table tr th , #fastenerList table tr th{
	font-family : "Roboto";
	font-weight : 700;
	color : #fff;
	background-color : #387ec4;
	text-align : center;
	padding : 0;
}
#product table td , #fastenerList table td{
	text-align : center;
	color : #221815;
	background-color : #fff;
}
@media (max-width: 639px){
	#product .description , #fastenerList .description{
		font-size : 14px;
	}
	#product .sub , #fastenerList .sub{
		font-size : 13px;
	}
	#product caption , #fastenerList caption{
		font-size : 14px;
		height : 40px;
		line-height : 40px;
	}
	#product table th , #fastenerList table th{
		height : 20px;
		font-size : 12px;
	}
	#product table td , #fastenerList table td{
		height : 40px;
		font-size : 14px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	#product .description , #fastenerList .description{
		font-size : 27px;
	}
	#product .sub , #fastenerList .sub{
		font-size : 26px;
	}
	#product caption , #fastenerList caption{
		font-size : 28px;
		height : 80px;
		line-height : 80px;
	}
	#product table th , #fastenerList table th{
		height : 40px;
		font-size : 23px;
	}
	#product table td , #fastenerList table td{
		height : 80px;
		font-size : 28px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	#product .description , #fastenerList .description{
		font-size : 27px;
	}
	#product .sub , #fastenerList .sub{
		font-size : 26px;
	}
	#product caption , #fastenerList caption{
		font-size : 28px;
		height : 80px;
		line-height : 80px;
	}
	#product table th , #fastenerList table th{
		height : 40px;
		font-size : 23px;
	}
	#product table td , #fastenerList table td{
		height : 80px;
		font-size : 28px;
	}
}
@media ( max-width: 991px){
	#product .carousel-control , #fastenerList .carousel-control{
		width : calc( 54 * 100% / 640 );
		height : auto;
		margin-top : calc( -27 * 100% / 640 );
	}
	#product .article-slide .carousel-indicators , #fastenerList .article-slide .carousel-indicators{
		width : calc( 400 * 100% / 580 );
		position : static;
		margin : calc( 17 / 640 * 100% ) auto 0;
	}
	#product .article-slide .carousel-indicators > li:nth-child(odd) , #fastenerList .article-slide .carousel-indicators > li:nth-child(odd){
		padding-left : 0;
		padding-right : calc(5 * 100% / 400);
	}
	#product .article-slide .carousel-indicators > li:nth-child(even) , #fastenerList .article-slide .carousel-indicators > li:nth-child(even){
		padding-right : 0;
		padding-left : calc(5 * 100% / 400);
	}
	#product .article-slide .carousel-indicators li , #fastenerList .article-slide .carousel-indicators li{
		width : 50%;
		text-indent : 0;
		display : block;
		height : auto;
		margin : 0;
		border : 0;
	}
	#product .carousel-control , #fastenerList .carousel-control{
		text-shadow : none;
		bottom : 0;
		top : 50%;
		font-size : 0;
		text-shadow : none;
		background : none;
		filter : alpha(opacity=100);
		opacity : .5;
	}
	#product .left.carousel-control , #fastenerList .left.carousel-control{
		left : calc( 28 * 100% / 580 );
	}
	#product .right.carousel-control , #fastenerList .right.carousel-control{
		right : calc( 28 * 100% / 580 );
	}
	#product h3 , #fastenerList h3{
		text-align : center;
		margin : calc( 60 / 640 * 100% ) auto 0;
		width : 100%;
	}
	#product h3 img , #fastenerList h3 img{
		height : auto;
	}
	#product .description , #fastenerList .description{
		line-height : 1.3;
		padding-left : calc( 30 * 100% / 580 );
		padding-right : calc( 30 * 100% / 580 );
		margin-top : calc( 38 / 640 * 100% );
	}
	#product .sub , #fastenerList .sub{
		padding-left : calc( 30 * 100% / 580 );
		padding-right : calc( 30 * 100% / 580 );
		line-height : 1.4;
		margin-top : calc( 38 / 640 * 100% );
	}
	#product caption , #fastenerList caption{
		margin-top : calc( 47 / 640 * 100% );
		padding-top : 0;
		padding-bottom : 0;
		color : #fff;
		background-color : #397dc4;
		padding-left : calc( 14 * 100% / 580 );
		border-bottom : 1px solid #fff;
		position : relative;
		white-space : nowrap;
	}
	#product caption:after , #fastenerList caption:after{
		content : "";
		border : 0;
		-webkit-transform-origin : center;
		        transform-origin : center;
		position : absolute;
		top : 50%;
		width : 10px;
		height : 10px;
		border-top : solid 1px #fff;
		border-right : solid 1px #fff;
		right : calc( 14 * 100% / 580 );
	}
	#product caption.collapsed:after , #fastenerList caption.collapsed:after{
		-webkit-transform : rotate(135deg);
		        transform : rotate(135deg);
		margin-top : -7.5px;
	}
	#product caption:not(.collapsed):after , #fastenerList caption:not(.collapsed):after{
		-webkit-transform : rotate(315deg);
		        transform : rotate(315deg);
		margin-top : -2.5px;
	}
	#product table , #fastenerList table{
		border-left : solid 1px #387ec4;
		border-right : solid 1px #387ec4;
		border-bottom : solid 1px #387ec4;
		width : calc( 520 * 100% / 580 );
		margin-left : auto;
		margin-right : auto;
	}
	#product table tbody tr td , #fastenerList table tbody tr td{
		font-family : "Roboto";
		font-weight : 300;
	}
	#product table tbody tr td img , #fastenerList table tbody tr td img{
		margin-top : calc( 7 / 640 * 100% );
		margin-bottom : calc( 7 / 640 * 100% );
	}
	#product table tbody , #fastenerList table tbody{
		height : auto!important;
	}
	#product table tr.rowColspan1 th , #product table tr.rowColspan1 td , #fastenerList table tr.rowColspan1 th , #fastenerList table tr.rowColspan1 td{
		width : 50%;
	}
	#product table tr.rowColspan1 th , #fastenerList table tr.rowColspan1 th{
		border-top : 1px solid #fff;
	}
	#product table tr.rowColspan1 th:first-child , #fastenerList table tr.rowColspan1 th:first-child{
		border-right : 1px solid #fff;
	}
	#product table tr.rowColspan1 td:first-child , #fastenerList table tr.rowColspan1 td:first-child{
		border-right : 1px solid #387ec4;
	}
}
@media ( min-width: 992px){
	#product li > .row > .col-md-5 , #fastenerList li > .row > .col-md-5{
		width : calc( 435 * 100% / 1080 );
		padding-left : 0;
		padding-right : calc( 35 * 100% / 1080 );
	}
	#product .carousel , #fastenerList .carousel{
		width : 100%;
	}
	#product .carousel .item img , #fastenerList .carousel .item img{
		width : 100%;
		height : auto;
	}
	#product .article-slide .carousel-indicators , #fastenerList .article-slide .carousel-indicators{
		width : 100%;
		position : static;
		margin : 29px 0 0;
	}
	#product .article-slide .carousel-indicators li , #fastenerList .article-slide .carousel-indicators li{
		width : 50%;
		text-indent : 0;
		display : block;
		height : auto;
		margin : 0;
		border : 0;
	}
	#product .article-slide .carousel-indicators li:nth-child(odd) , #fastenerList .article-slide .carousel-indicators li:nth-child(odd){
		padding-left : 0;
		padding-right : calc( 5 * 100% / 400 );
	}
	#product .article-slide .carousel-indicators li:nth-child(even) , #fastenerList .article-slide .carousel-indicators li:nth-child(even){
		padding-right : 0;
		padding-left : calc( 5 * 100% / 400 );
	}
	#product .article-slide .carousel-indicators img , #product .article-slide .carousel-indicators .active img , #fastenerList .article-slide .carousel-indicators img , #fastenerList .article-slide .carousel-indicators .active img{
		border : 0;
		opacity : 1;
		width : 100%;
		height : auto;
		outline : none;
	}
	#product .carousel-control , #fastenerList .carousel-control{
		text-shadow : none;
		bottom : 0;
		top : 50%;
		margin-top : -20px;
		width : 40px;
		height : 40px;
		font-size : 0;
		text-shadow : none;
		background : none;
		filter : alpha(opacity=100);
		opacity : .5;
	}
	#product .left.carousel-control , #fastenerList .left.carousel-control{
		left : 15px;
	}
	#product .right.carousel-control , #fastenerList .right.carousel-control{
		right : 15px;
	}
	#product table , #fastenerList table{
		border : solid 1px #387ec4;
	}
}

/*----------------------------------
Color
----------------------------------*/
.red{
	color : #f00;
}
.blue{
	color : #001eff;
}
.yellow{
	color : #ffba00;
}

.beige{
	color : #cbb56f;
}
.gray{
	color : #797979;
}
.brown{
	color : #8f2100;
}
.navyblue{
	color : #001987;
}
.lightgray{
	color : #7d7d7d;
}
.pink{
	color : #ff0090;
}
.lightblue{
	color : #00deff;
}

/*----------------------------------
content
----------------------------------*/
.content-slash:before{
	content : "/\0020";
}