@charset "utf-8";

/*----------------------------------
mv
----------------------------------*/
body:not(.top) #mv .col-xs-12{
	background-image : url("/en/images/products/banok503/hero.jpg");
}

/*----------------------------------
links
----------------------------------*/
#links h3{
	font-family : "Merriweather";
	font-weight : 700;
	color : #0060b6;
}
#links h3 span{
	display : block;
}
#links p{
	font-family : "Montserrat";
	font-weight : 300;
	color : #323232;
}
#links li a{
	font-family : "Montserrat";
	font-weight : 300;
	background-image : url("/en/images/ui/btn/square_bottom.svg");
	background-repeat : no-repeat;
	background-color : #061638;
	color : #fff;
	text-align : center;
	display : -webkit-box;
	display : flex;
	-webkit-box-align : center;
	align-items : center;
	-webkit-box-pack : center;
	justify-content : center;
	border : 2px solid #061638;
}
#links li a:hover{
	background-image : url("/en/images/ui/btn/square_bottom_on.svg");
	background-color : transparent;
	color : #061638;
}
@media (max-width: 639px){
	#links h3{
		font-size : 16px;
	}
	#links h3 span{
		font-size : 21px;
	}
	#links p{
		font-size : 13px;
	}
	#links li:not(:first-child){
		margin-top : 15px;
	}
	#links li a{
		height : 40px;
		padding-bottom : 7px;
		font-size : 13px;
		background-position : center 30px;
		background-size : 7px 5px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	#links h3{
		font-size : 32px;
	}
	#links h3 span{
		font-size : 42px;
	}
	#links p{
		font-size : 26px;
	}
	#links li:not(:first-child){
		margin-top : 30px;
	}
	#links li a{
		height : 80px;
		padding-bottom : 10px;
		font-size : 26px;
		background-position : center 60px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	#links h3{
		font-size : 32px;
	}
	#links h3 span{
		font-size : 42px;
	}
	#links p{
		font-size : 26px;
	}
	#links li:not(:first-child){
		margin-top : 30px;
	}
	#links li a{
		height : 80px;
		padding-bottom : 10px;
		font-size : 26px;
		background-position : center 60px;
	}
}
@media ( max-width: 991px){
	#links{
		padding-top : calc( 93 / 640 * 100% );
		padding-bottom : calc( 47 / 640 * 100% );
	}
	#links .container > .row > .col-xs-12{
		padding-left : calc( 60 * 100% / 640 );
		padding-right : calc( 60 * 100% / 640 );
	}
	#links h3{
		font-size : 25px;
		line-height : 40px;
		text-align : center;
	}
	#links h3 span{
		display : block;
	}
	#links p{
		line-height : 1.3;
		margin : calc( 66 / 640 * 100% ) auto 0;
	}
	#links ul{
		display : -webkit-box;
		display : flex;
		-webkit-box-orient : vertical;
		-webkit-box-direction : normal;
		flex-direction : column;
		margin-top : calc( 91 / 640 * 100% );
	}
	#links li{
		padding-left : 0;
		padding-right : 0;
	}
	#links li :not(:first-child){
		margin-left : calc( 12 * 100% / 1353 );
	}
	#links li a{
		border-style : solid;
		border-width : 1px;
		border-color : #061638;
		text-align : center;
		line-height : 1;
	}
}
@media ( min-width: 992px){
	#links{
		padding-top : 104px;
	}
	#links h3{
		font-size : 25px;
		line-height : 40px;
		text-align : center;
	}
	#links h3 span{
		font-size : 34px;
		display : block;
	}
	#links p{
		font-size : 21px;
		line-height : 27px;
		max-width : 1080px;
		margin : 40px auto 0;
	}
	#links ul{
		max-width : 1353px;
		margin : 78px auto 0;
		display : -webkit-box;
		display : flex;
		-webkit-box-pack : justify;
		justify-content : space-between;
	}
	#links li{
		width : calc( 261 * 100% / 1353 );
		padding-left : 0;
		padding-right : 0;
	}
	#links li :not(:first-child){
		margin-left : calc( 12 * 100% / 1353 );
	}
	#links li a{
		background-position : center 98px;
		height : 120px;
		font-size : 23px;
		line-height : 24px;
		padding-bottom : 20px;;
	}
}


/*----------------------------------
features
----------------------------------*/
#features{
	background-color : #f3f3f3;
}
#features h3{
	font-family : "Merriweather";
	font-weight : 700;
	color : #0060b6;
}
#features h3 span{
	font-family : "Merriweather";
	font-weight : 700;
}
#features .container-fluid > .row > .col-xs-12 > p{
	font-family : "Montserrat";
	font-weight : 300;
	color : #323232;
}
#features .left{
	padding-left : 0;
}
#features .left li{
	counter-increment : number;
}
#features .left h4:before{
	content : counter(number);
	border-radius : 50%;
	border-style : solid;
	border-width : 3px;
	border-color : #fe9d20;
	display : inline-block;
	text-align : center;
	font-family : Arial;
	font-weight : 700;
	color : #000;
	position : absolute;
	top : 50%;
	left : 0;
}
#features .left h4{
	position : relative;
	font-family : "Montserrat";
	font-weight : 500;
	color : #fe9d20;
}
#features .left li p{
	color : #393939;
}
#features .left > p{
	font-family : Arial;
	color : #393939;
}
#features .right figcaption{
	color : #000;
}
#features .right figcaption:after{
	content : "";
	background : #000 left center;
	height : 2px;
}
#features .right ul{
	font-family : "Roboto";
	font-weight : 400;
	color : #000;
}
#features .right li:before{
	content : "- ";
}
@media (max-width: 639px){
	#features h3{
		font-size : 16px;
	}
	#features h3 span{
		font-size : 21px;
	}
	#features .container-fluid > p{
		font-size : 13px;
	}
	#features .left li{
	}
	#features .left h4:before{
		width : 25px;
		height : 25px;
		line-height : 19px;
		font-size : 15px;
	}
	#features .left h4{
		padding-left : 29px;
		font-size : 14px;
	}
	#features .left li p{
		font-size : 14px;
		padding-left : 29px;
	}

	#features .left > p{
		font-size : 10px;
	}
	#features .right figcaption{
		font-size : 17px;
	}
	#features .right figcaption:after{
	}
	#features .right ul{
		font-size : 13px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	#features h3{
		font-size : 32px;
	}
	#features h3 span{
		font-size : 42px;
	}
	#features .container-fluid > .row > .col-xs-12 > p{
		font-size : 26px;
	}
	#features .left li{
	}
	#features .left h4:before{
		width : 50px;
		height : 50px;
		line-height : 44px;
		font-size : 30px;
	}
	#features .left h4{
		padding-left : 54px;
		font-size : 28px;
	}
	#features .left li p{
		font-size : 28px;
		padding-left : 54px;
	}
	#features .left > p{
		font-size : 20px;
	}
	#features .right figcaption{
		font-size : 35px;
	}
	#features .right figcaption:after{
	}
	#features .right ul{
		font-size : 26px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	#features h3{
		font-size : 32px;
	}
	#features h3 span{
		font-size : 42px;
	}
	#features .container-fluid > .row > .col-xs-12 > p{
		font-size : 26px;
	}
	#features .left li{
	}
	#features .left h4:before{
		width : 50px;
		height : 50px;
		line-height : 44px;
		font-size : 30px;
	}
	#features .left h4{
		padding-left : 54px;
		font-size : 28px;
	}
	#features .left li p{
		font-size : 28px;
		padding-left : 54px;
	}
	#features .left > p{
		font-size : 20px;
	}
	#features .right figcaption{
		font-size : 35px;
	}
	#features .right figcaption:after{
	}
	#features .right ul{
		font-size : 26px;
	}
}
@media ( max-width: 991px){
	#features{
		padding-top : calc( 101 / 640 * 100% );
		padding-bottom : calc( 110 / 640 * 100% );
	}
	#features h3{
		line-height : 1.4;
		text-align : center;
	}
	#features h3 span{
		display : block;
	}
	#features .container-fluid > .row > .col-xs-12{
		padding-left : calc( 60 * 100% / 640 );
		padding-right : calc( 60 * 100% / 640 );
	}
	#features .container-fluid > .row > .col-xs-12 > p{
		margin : calc( 59 / 640 * 100% ) auto 0;
		line-height : 1.3;
	}
	#features .row div.row{
		margin : calc( 66 / 640 * 100% ) auto 0;
		display : -webkit-box;
		display : flex;
		-webkit-box-orient : vertical;
		-webkit-box-direction : reverse;
		flex-direction : column-reverse;
	}
	#features .left{
		padding-left : 0;
		padding-right : 0;
		margin-top : calc( 62 / 640 * 100% );
	}
	#features .left ol{
		list-style-type : none;
		padding-left : 0;
		margin-left : 0;
	}
	#features .left li{
		margin-bottom : calc( 54 / 640 * 100% );
		padding-left : 0;
		padding-right : 0;
	}
	#features .left h4:before{
		border-radius : 50%;
		border-style : solid;
		border-width : 3px;
		border-color : #fe9d20;
		position : absolute;
		left : 0;
		top : 0;
	}
	#features .left h4{
		position : relative;
		line-height : 1.3;
	}
	#features .left li p{
		font-family : "Roboto";
		margin-top : calc( 20 / 640 * 100% );
		font-weight : 400;
		line-height : 1.3;
	}
	#features .left > p{
		font-weight : 400;
		line-height : 1;
		margin-top : calc( 67 / 640 * 100% );
	}
	#features .right{
		padding-right : 0;
		padding-left : 0;
	}
	#features .right img{
		width : 100%;
		height : auto;
	}
	#features .right figure{
		margin-top : calc( 33 / 640 * 100% );
	}
	#features .right figcaption{
		line-height : 33px;
		font-weight : bold;
		position : relative;
		background-color : #f3f3f3;
		display : -webkit-box;
		display : flex;
		-webkit-box-align : center;
		align-items : center;
	}
	#features .right figcaption:after{
		content : "";
		background-size : 100% 2px;
		height : 2px;
		width : calc( 353 * 100% / 580 );
		margin-left : calc( 26 * 100% / 580 );
	}
	#features .right ul{
		margin : calc( 30 / 640 * 100% ) 0 0 calc( 20 * 100% / 580 );
		font-weight : 400;
		line-height : 1.6;
	}
	#features .btn{
		margin-top : calc( 30 / 640 * 100% );
	}
}
@media ( min-width: 992px){
	#features{
		padding : 100px 0 171px;
	}
	#features h3{
		font-size : 25px;
		line-height : 42px;
		text-align : center;
	}
	#features h3 span{
		font-size : 34px;
		display : block;
	}
	#features .container-fluid > .row > .col-xs-12 > p{
		font-size : 22px;
		line-height : 33px;
		text-align : center;
		margin : 88px auto 0;
	}
	#features .row div.row{
		margin : 103px auto 0;
		max-width : 1080px;
	}
	#features .left{
		padding-left : 0;
	}
	#features .left ol{
		list-style-type : none;
		padding-left : 0;
		margin-left : 0;
	}
	#features .left li{
		margin-bottom : 27px;
		padding-left : 0;
		padding-right : 0;
	}
	#features .left h4:before{
		border-radius : 50%;
		border-style : solid;
		border-width : 3px;
		border-color : #fe9d20;
		width : 42px;
		height : 42px;
		line-height : 36px;
		font-size : 24px;
		position : absolute;
		top : 50%;
		margin-top : -21px;
		left : 0;
	}
	#features .left h4{
		padding-left : 56px;
		position : relative;
		font-size : 21px;
		line-height : 21px;
	}
	#features .left li p{
		font-family : Arial;
		margin-top : 20px;
		padding-left : 56px;
		font-size : 18px;
		font-weight : 400;
		line-height : 21px;
	}
	#features .left > p{
		font-size : 18px;
		font-weight : 400;
		line-height : 21px;
		margin-top : 30px;
	}
	#features .right{
		padding-right : 0;
	}
	#features .right img{
		padding-top : 9px;
		padding-left : 19px;
		width : 100%;
		height : auto;
	}
	#features .right figure{
		margin-top : 95px;
	}
	#features .right figcaption{
		font-size : 25px;
		line-height : 33px;
		font-weight : bold;
		position : relative;
		background-color : #f3f3f3;
		display : -webkit-box;
		display : flex;
		-webkit-box-align : center;
		align-items : center;
	}
	#features .right figcaption:after{
		content : "";
		background-size : 100% 2px;
		height : 2px;
		width : 393px;
		margin-left : 18px;
	}
	#features .right ul{
		margin : 37px 0 0 53px;
		font-size : 23px;
		font-weight : 400;
		line-height : 36px;
	}
}
@media (min-width: 992px ) and ( max-width: 1199px){
	#features .right figcaption:after{
		width : 300px;
	}
}
@media (min-width: 1200px){
	#features .right figcaption:after{
		width : 393px;
	}
}

/*----------------------------------
product
----------------------------------*/
#product ul.row > li:nth-child(even){
	background-color : #f3f3f3;
	position : relative;
	z-index : 1;
}
#product .top{
	font-family : "Montserrat";
	font-weight : 600;
	color : #0060b6;
	border-style : solid;
	border-width : 1px;
	border-color : #0060b6;
	background-color : #fff;
	display : inline-block;
	z-index : 2;
}
#product .btn-toPin{
	line-height : 1;
	display : block;
	background-image : url("/en/images/ui/btn/square_bottom_on.svg");
	background-repeat : no-repeat;
}
#product .btn-toPin:hover{
	background-image : url("/en/images/ui/btn/square_bottom.svg");
}
@media (max-width: 639px){
	#product .top{
		height : 34px;
		line-height : 34px;
		font-size : 14px;
	}
	#product .top:after{
		top : 16px;
	}
	#product .btn-toPin{
		height : 30px;
		line-height : 30px;
		font-size : 10px;
		background-position : center 22px;
		background-size : 6px 3px;
	}
	#product caption{
		font-size : 13px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	#product .top{
		height : 68px;
		line-height : 68px;
		font-size : 28px;
	}
	#product .top:after{
		top : 34px;
	}
	#product .btn-toPin{
		height : 60px;
		line-height : 60px;
		font-size : 20px;
		background-position : center 45px;
		background-size : 9px 6px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	#product .top{
		height : 68px;
		line-height : 68px;
		font-size : 28px;
	}
	#product .top:after{
		top : 34px;
	}
	#product .btn-toPin{
		height : 60px;
		line-height : 60px;
		font-size : 20px;
		background-position : center 45px;
		background-size : 9px 6px;
	}
}
@media ( max-width: 991px){
	#product ul.row > li{
		padding-top : calc( 101 / 640 * 100% );
		padding-bottom : calc( 105 / 640 * 100% );
	}
	#product .datas{
		position : static;
	}
	#product .row .row > div{
		padding-left : 0;
		padding-right : 0;
	}
	#product .top{
		background-color : #fff;
		margin-bottom : calc( 35 / 640 * 100% );
		border-style : solid;
		border-width : 1px;
		display : inline-block;
		z-index : 2;
		padding : 0 20px;
		position : static;
	}
	#product .top:after{
		border-bottom : 1px solid #0060b6;
		content : "";
		margin : 0 auto;
		position : absolute;
		left : 0;
		right : 0;
		width : calc( 580 * 100% / 640 );
		z-index : -1;
	}
	#product li:nth-child(1) h3 img{
		width : calc( 341 * 100% / 580 );
	}
	#product li:nth-child(2) h3 img{
		width : calc( 354 * 100% / 580 );
	}
	#product li:nth-child(3) h3 img{
		width : calc( 348 * 100% / 580 );
	}
	#product li:nth-child(4) h3 img{
		width : calc( 344 * 100% / 580 );
	}
	#product li:nth-child(5) h3 img{
		width : calc( 370 * 100% / 580 );
	}
	#product .btn-toPin{
		width : calc( 300 * 100% / 610 );
		margin : calc( 53 / 640 * 100% ) auto 0;
		padding : 0 0 calc( 10 / 640 * 100% );
	}
	#product table tbody tr td:nth-child(3) img{
		margin-top : 7px;
		margin-bottom : 7px;
	}
}
@media (min-width: 992px ) and ( max-width: 1199px){
	#product .container-fluid{
		padding-left : 15px;
		padding-right : 15px;
	}
}
@media ( min-width: 992px){
	#product ul.row > li{
		padding-top : 170px;
		padding-bottom : 170px;
	}
	#product li > .row{
		max-width : 1080px;
		margin : 0 auto;
	}
	#product li > .row > .col-md-7{
		width : calc( 645 * 100% / 1080 );
		padding-left : 0;
		padding-right : 0;
	}
	#product li > .row > .col-md-7:after{
		border-bottom : 1px solid #0060b6;
		content : "";
		margin : 0 auto;
		position : absolute;
		top : 16px;
		left : 0;
		right : 0;
		width : 95%;
		z-index : 1;
	}
	#product li:nth-child(even) .top{
		background-color : #f3f3f3;
	}
	#product .top{
		font-size : 20px;
		border-style : solid;
		border-width : 1px;
		height : 32px;
		line-height : 32px;
		display : inline-block;
		padding : 0 20px;
		position : relative;
		z-index : 2;
	}
	#product li:nth-of-type(1) .top{
		width : 132px;
	}
	#product h3{
		margin-top : 25px;
	}
	#product .description{
		margin-top : 38px;
		font-size : 20px;
		line-height : 21px;
	}
	#product .sub{
		margin-top : 17px;
		font-size : 18px;
		font-weight : 400;
		line-height : 24px;
	}
	#product .btn-toPin{
		padding : 17px 0 0;
		width : 300px;
		height : 60px;
		line-height : 1;
		margin : 28px 0 0 auto;
		display : block;
		background-position : center 45px;
		background-size : 9px 6px;
	}
	#product table{
		margin-top : 59px;
		width : 100%;
	}
	#product table caption{
		color : #8cc3ff;
		font-size : 24px;
		line-height : 1;
		padding : 0 0 11px;
	}
	#product table thead tr:first-child th:first-child{
		width : 31%;
	}
	#product table thead tr:first-child th:nth-child(2){
		width : 29%;
	}
	#product table thead tr:first-child th:nth-child(3){
		width : 39%;
	}
	#product table tr th{
		font-size : 18px;
		width : 645px;
		height : 40px;
		min-height : 40px;
		padding : 0;
		font-family : "Roboto";
		font-weight : 700;
		color : #fff;
		background-color : #387ec4;
		text-align : center;
		padding : 0;
	}
	#product table thead tr:first-child th:not(:first-child){
		border-left : solid 1px #fff;
	}
	#product table tr td:first-child{
		font-family : "Roboto";
		font-weight : 400;
	}
	#product table tr td:nth-child(2){
		font-family : "Roboto";
		font-weight : 300;
	}
	#product table td{
		min-height : 121px;
		text-align : center;
		font-size : 18px;
		line-height : 26px;
	}
	#product table tr td:first-child:before{
		display : inline-block;
		float : left;
		content : "";
	}
	#product table tr td:not(:first-child){
		border-left : solid 1px #387ec4;
	}
	#product table tr td:first-child{
		line-height : 81px;
	}
	#product table tr td:first-child:before{
		display : inline-block;
		float : left;
		height : 81px;
		content : "";
	}
	#product table td img{
		max-width : 100%;
	}
}
@media (min-width: 640px) and (max-width: 649px){
	#product #banok503s caption.custom-fz{
		font-size : 27px;
	}
}
/*----------------------------------
Pinslist
----------------------------------*/
#Pinslist h4{
	font-family : "Merriweather";
	font-weight : 700;
	color : #0060b6;
}
#Pinslist p{
	font-family : "Montserrat";
	font-weight : 300;
	color : #2f2f2f;
}
#Pinslist caption{
	color : #000;
}
#Pinslist tr td{
	font-family : "Roboto";
	font-weight : 300;
	text-align : center;
}
#Pinslist tr td span.flex{
	display : -webkit-box;
	display : flex;
	-webkit-box-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	align-items : center;
	line-height : 1.2;
}
#Pinslist tr td span:not(:first-child):before{
	content : "/";
	color : #2f2f2f;
}
#Pinslist td img{
	max-width : 100%;
}
@media (max-width: 639px){
	#Pinslist h4{
		font-size : 21px;
	}
	#Pinslist p{
		font-size : 12px;
	}
	#Pinslist caption{
		font-size : 14px;
	}
	#Pinslist caption span{
		font-size : 10px;
	}
	#Pinslist table td{
		min-height : 60px;
		font-size : 14px;
		padding-top : 20px;
		line-height : 40px;
	}
	#Pinslist table td:before{
		height : 20px;
		line-height : 20px;
		font-size : 12px;
	}
	#Pinslist table .btn-collapse{
		font-size : 14px;
		height : 32px;
		line-height : 32px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	#Pinslist h4{
		font-size : 42px;
	}
	#Pinslist p{
		font-size : 24px;
	}
	#Pinslist caption{
		font-size : 28px;
	}
	#Pinslist caption span{
		font-size : 19px;
	}
	#Pinslist table td{
		min-height : 120px;
		font-size : 28px;
		padding-top : 40px;
		line-height : 80px;
	}
	#Pinslist table td:before{
		height : 40px;
		line-height : 40px;
		font-size : 23px;
	}
	#Pinslist table .btn-collapse{
		font-size : 28px;
		height : 65px;
		line-height : 65px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	#Pinslist h4{
		font-size : 42px;
	}
	#Pinslist p{
		font-size : 24px;
	}
	#Pinslist caption{
		font-size : 28px;
	}
	#Pinslist caption span{
		font-size : 19px;
	}
	#Pinslist table td{
		min-height : 120px;
		font-size : 28px;
		padding-top : 40px;
		line-height : 80px;
	}
	#Pinslist table td:before{
		height : 40px;
		line-height : 40px;
		font-size : 23px;
	}
	#Pinslist table .btn-collapse{
		font-size : 28px;
		height : 65px;
		line-height : 65px;
	}
}
@media ( max-width: 991px){
	#Pinslist{
		background-color : #f3f3f3;
		padding-top : calc( 105 / 640 * 100% );
		padding-bottom : calc( 40 / 640 * 100% );
	}
	#Pinslist .container-fluid > .row > .col-xs-12{
		padding-left : 0;
		padding-right : 0;
	}
	#Pinslist p{
		margin-top : calc( 70 / 640 * 100% );
		padding-left : calc( 60 * 100% / 640 );
		padding-right : calc( 60 * 100% / 640 );
	}
	#Pinslist li{
		padding-top : calc( 100 / 640 * 100% );
		padding-bottom : calc( 100 / 640 * 100% );
		padding-left : calc( 60 * 100% / 640 );
		padding-right : calc( 60 * 100% / 640 );
	}
	#Pinslist li:nth-child(even){
		background-color : #fff;
	}
	#Pinslist caption{
		font-family : "Montserrat";
		font-weight : 500;
		text-align : center;
		padding-top : 0;
		padding-bottom : 0;
		line-height : 1.2;
		display : block;
	}
	#Pinslist caption span{
		display : block;
		margin-top : calc( 45 / 640 * 100% );
		font-family : "Montserrat";
		font-weight : 300;
		text-align : right;
		margin-bottom : calc( 9 / 640 * 100% );
	}
	#Pinslist table{
		width : 100%;
	}
	#Pinslist table thead{
		display : none;
	}
	#Pinslist table tbody{
	}
	#Pinslist table tbody tr{
		display : block;
		margin-bottom : calc( 30 / 640 * 100% );
		border : solid 1px #0060b6;
	}
	#Pinslist table tbody tr.collapse{
		display : none;
	}
	#Pinslist table tbody tr.collapse.in{
		display : block;
	}
	#Pinslist table tbody tr td{
		display : block;
		display : -webkit-box;
		-webkit-box-orient : vertical;
		-webkit-box-direction : normal;
		flex-direction : column;
		-webkit-box-align : center;
		align-items : center;
		-webkit-box-pack : center;
		justify-content : center;
		position : relative;
		background-color : #fff;
	}
	#Pinslist table tbody tr td:before{
		background-color : #387ec4;
		text-align : center;
		font-family : "Roboto";
		font-weight : 700;
		width : 100%;
		display : block;
		color : #fff;
		position : absolute;
		top : 0;
		left : 0;
	}
	#Pinslist table tbody tr td:nth-child(1):before{
		content : "Name (Size)";
	}
	#Pinslist table tbody tr td:nth-child(2):before{
		content : "QTY/Inner box";
	}
	#Pinslist table tbody tr td:nth-child(3):before{
		content : "QTY/Carton";
	}
	#Pinslist table tbody tr td:nth-child(4):before{
		content : "Color";
	}
	#Pinslist table tbody tr td:nth-child(5):before{
		content : "Head shape";
	}
	#Pinslist table tbody tr td:nth-child(5) img{
		margin-top : calc( 15 / 640 * 100% );
		margin-bottom : calc( 15 / 640 * 100% );
	}
	#Pinslist table .btn-collapse{
		width : 100%;
		text-align : center;
		background-color : #387ec4;
		color : #fff;
		font-family : "Roboto";
		font-weight : 700;
		position : relative;
		margin-bottom : calc( 35 / 640 * 100% );
	}
	#Pinslist table .btn-collapse.collapsed{
		margin-bottom : calc( 35 / 640 * 100% );
	}
	#Pinslist table .btn-collapse:not(.collapsed){
		margin-bottom : 0;
		border-bottom : 1px solid #fff;
	}
	#Pinslist table .btn-collapse: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( 28 * 100% / 580 );
		margin-top : -7.5px;
	}
	#Pinslist table .btn-collapse:not(.collapsed):after{
		-webkit-transform : rotate(315deg);
		        transform : rotate(315deg);
		margin-top : -2.5px;
	}
}
@media ( min-width: 992px){
	#Pinslist table{
		width : 100%;
	}
	#Pinslist tr td span.flex{
		height : 81px;
	}
}
@media ( min-width: 992px){
	#Pinslist{
		background-color : #f3f3f3;
		padding-top : 99px;
		padding-bottom : 206px;
	}
	#Pinslist h4{
		font-size : 34px;
	}
	#Pinslist p{
		font-size : 21px;
		line-height : 26px;
		max-width : 1077px;
		margin : 85px auto 0;
	}
	#Pinslist li{
		padding-left : 0;
		padding-right : 0;
	}
	#Pinslist li:first-child table{
		margin-top : 80px;
	}
	#Pinslist li:not(:first-child) table{
		margin-top : 70px;
	}
	#Pinslist table{
		margin-left : auto;
		margin-right : auto;
		border : solid 2px #387ec4;
	}
	#Pinslist caption{
		font-size : 25px;
		padding : 0 0 9px;
	}
	#Pinslist caption span{
		color : #2f2f2f;
		font-size : 18px;
		float : right;
		display : -webkit-box;
		display : flex;
		-webkit-box-align : end;
		align-items : flex-end;
		height : 35px;
	}
	#Pinslist thead tr:first-child th:first-child{
		width : 18%;
	}
	#Pinslist thead tr:first-child th:nth-child(2){
		width : 17%;
	}
	#Pinslist thead tr:first-child th:nth-child(3){
		width : 17%;
	}
	#Pinslist thead tr:first-child th:nth-child(4){
		width : 30%;
	}
	#Pinslist thead tr:first-child th:nth-child(5){
		width : 16%;
	}
	#Pinslist tr th{
		font-family : "Montserrat";
		font-weight : 500;
		color : #fff;
		font-size : 18px;
		background-color : #387ec4;
		width : 645px;
		height : 60px;
		text-align : center;
		min-height : 60px;
		padding : 0;
	}
	#Pinslist tr th:not(:first-child){
		border-left : solid 2px #fff;
	}
	#Pinslist tr td{
		font-family : "Roboto";
		font-weight : 300;
		min-height : 121px;
		font-size : 18px;
		line-height : 26px;
		color : #2f2f2f;
	}
	#Pinslist tbody tr:nth-child( odd ) td{
		background-color : #fff;
	}
	#Pinslist tr td:first-child{
		line-height : 81px;
	}
	#Pinslist tbody tr:not(:first-child) td{
		border-top : solid 2px #387ec4;
	}
	#Pinslist tbody tr:nth-child( odd ) td{
		background-color : #fff;
	}
	#Pinslist tr td:not(:first-child){
		border-left : solid 2px #387ec4;
	}
	#Pinslist tr td:first-child:before{
		display : inline-block;
		float : left;
		height : 81px;
		content : "";
	}
}
@media (min-width: 1200px){
	#Pinslist table{
		width : 1080px;
	}
}