/*
    MOBILE VERSION
*/
section#benefit{}
	section#benefit div.text_content{
		width: 100%;
	}
		section#benefit div.text_content h2.sub_title{}
		section#benefit div.text_content p{}
	section#benefit div.shoes_details{
		width: 100%;
		height: auto;
		position: relative;
	}
		section#benefit div.shoes_details div.image_key_point{
			width: 150px;
			margin: 0 auto; 
			height: auto;
			position: relative;
		}
			section#benefit div.shoes_details div.image_key_point img{
				width: 100%;
			}
		section#benefit div.shoes_details span.dot_border{
			display: block;
			height: 30px;
			width: 30px;
			border: 1px solid #ffffff;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
			cursor: pointer;
		}
			section#benefit div.shoes_details span.dot_border span.dot_background{
				display: block;
				height: 24px;
				width: 24px;
				background-color: #ffffff;
				border-radius: 50%;
				margin: 3px;
			}
			section#benefit div.shoes_details span.dot_border.active{}
				section#benefit div.shoes_details span.dot_border.active span.dot_background{ background-color: #498098; }
				section#benefit div.shoes_details span.colorborder{
					display: block;
					position: absolute;
					top: 0;
					width: calc(100% - 16px);
					max-width: 400px;
					height: 320px;
					border: 8px solid #498098;
					z-index: -1;
					transform: translate(0px, 60px);
				}
		section#benefit div.shoes_details div.image_key_point_detail{
			width: calc(100% - 30px);
			height: auto;
			background-color: #498098;
			padding: 15px;
			max-width: 700px;
		}
			section#benefit div.shoes_details div.image_key_point_detail h3.subtitle{
				color: white;
				font-size: 2.6rem;
				font-weight: 600;
			}
			section#benefit div.shoes_details div.image_key_point_detail p{
				width: 100%;
				padding-top: 5px;
				color: white;
			}


section#materials{}
	section#materials div.content_right{
		width: 100%;
	}
		section#materials div.content_right div.image{
            background-size: cover;
            background-position: center center;
            display: block;
            width: 100%;
            height: 200px;
		}
	section#materials div.content_left{
		width: 100%;
		margin-top: 20px;
	}
		section#materials div.content_left h2{}
		section#materials div.content_left p{}

section#type_of_materials{}
	section#type_of_materials h2.sub_title{}
	section#type_of_materials ul.Three_column{
		width: 100%;
	}
		section#type_of_materials ul.Three_column li{
			width: 100%;
			height: 250px;
			position: relative;
		}
			section#type_of_materials ul.Three_column li div.text_content{
				width: 90%;
				margin: 0 auto; 
				height: 250px;
				z-index: 2;
			}
			section#type_of_materials ul.Three_column li div.text_content h3{
				font-weight: 800;
				font-size: 2.3rem;
				color: #303030;
				text-align: left;

			}
			section#type_of_materials ul.Three_column li div.text_content p{
				font-weight: 200;
				font-size: 1.8rem;
				color: #303030;
				text-align: left;
			}
		section#type_of_materials ul.Three_column li span.colorbackground{
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 200px;
			height: 200px;
			background-color: rgba(215, 210, 200, .3);
			transform: translate( 20px, 20px );
		}


/*
    TABLET VERSION
*/
@media screen and (min-width: 768px ){
section#benefit{ overflow: auto; }
	section#benefit div.text_content{
		width: 50%;
		float: right;
	}
		section#benefit div.text_content h2.sub_title{}
		section#benefit div.text_content p{}
	section#benefit div.shoes_details{
		height: auto;
		position: relative;
		width: 45%;
		float: left;
		margin: 120px 0 0 0;
	}
		section#benefit div.shoes_details div.image_key_point{}
			section#benefit div.shoes_details div.image_key_point img{}
		section#benefit div.shoes_details span.dot_border{}
			section#benefit div.shoes_details span.dot_border span.dot_background{}
			section#benefit div.shoes_details span.dot_border.active{}
				section#benefit div.shoes_details span.dot_border.active span.dot_background{}
				section#benefit div.shoes_details span.colorborder{}
		section#benefit div.shoes_details div.image_key_point_detail{ width: calc(180% - 10px);	}
			section#benefit div.shoes_details div.image_key_point_detail h3.subtitle{}
			section#benefit div.shoes_details div.image_key_point_detail p{}


section#materials{ overflow: auto; }
	section#materials div.content_right{
		float: right;
		width: 40%;
	}
		section#materials div.content_right div.image{ height: 600px; }
	section#materials div.content_left{
		float: left;
		width: 50%;
		margin: 0 10% 0 0;
	}

	section#type_of_materials ul.Three_column{
		margin-top: 40px;
	}
	section#type_of_materials ul.Three_column li div.text_content{
		width: 100%;
		height: auto;
	}
		section#type_of_materials ul.Three_column li span.colorbackground{
			width: 180px;
			height: 180px;
		}

}

/*
    SMALL SCREEN COMPUTER VERSION
*/
@media screen and (min-width: 992px ){
	section#benefit div.text_content{}
		section#benefit div.text_content h2.sub_title{}
		section#benefit div.text_content p{}
	section#benefit div.shoes_details{ margin: 40px 0 0 0; }
		section#benefit div.shoes_details div.image_key_point{}
			section#benefit div.shoes_details div.image_key_point img{}
		section#benefit div.shoes_details span.dot_border{}
			section#benefit div.shoes_details span.dot_border span.dot_background{}
			section#benefit div.shoes_details span.dot_border.active{}
				section#benefit div.shoes_details span.dot_border.active span.dot_background{}
				section#benefit div.shoes_details span.colorborder{}
		section#benefit div.shoes_details div.image_key_point_detail{}
			section#benefit div.shoes_details div.image_key_point_detail h3.subtitle{}
			section#benefit div.shoes_details div.image_key_point_detail p{}

}

/*
    LARGE SCREEN COMPUTER VERSION
*/
@media screen and (min-width: 1200px ){
	section#materials div.content_right div.image{ height: 400px; }
	section#benefit div.shoes_details{ margin: 0 0 0 0; }


}

/*
    SUPER LARGE SCREEN COMPUTER VERSION
*/
@media screen and (min-width: 1600px ){}