body{
	--bg-black:#000;
}
.img-responsive{
	width: 100%;
}
.home{
	max-width: 1920px;
}
h1,h2,h3{
	margin-top: 0;
	margin-bottom: 0;
}
.bg-white{
	background-color: #fff;
}
.display-flex{
	display: flex;
}
.align-items-center {
	display: flex;
	align-items: center!important;
}
.bg-green{
	background-color:var(--msColor);
}
.d-none{
	display: none!important;
}
.d-block{
	display: block;
}
.z-index-1 {
    z-index: 1;
}
.section-main-header{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.top-header {
	background: #fff;
}
.main-nav .menu, .top-header a, .header a, .main-nav .menu li .search-bar, .header .z-index, .main-nav .search-bar input, .main-nav .search-bar button {
	z-index: 9999;
}
.main-nav .menu>li>a {
	background-image: unset;
	color: #fff;
}
.main-nav .menu>li>a:hover {
    background-image: linear-gradient(#fff,#fff),linear-gradient(#ffffff00,#fff0);
}
.banner .b-video #myVideo {
	display: table;
	min-height: 100vh;
	width: 100%; 
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
}
.banner .b-video .overley {
	position: absolute;
	background-size: 815px 500px;
	left: 0;
	top: 0;
	background-image: url('/assets/images/banner/video/overlay1.webp');
	width: 100%;
	height: 100%;
	opacity: .5;
	background-repeat: repeat;
}
.banner img{
	display: block;
	width: 100%;
}
.banner .box-banner{
	position: relative;
}
.banner .box-banner-ab {
    position: absolute;
    width: 50%;
    z-index: 1;
    bottom: 0;
    left: 8%;
}
.banner .b-video{
    height: 100vh;
}
.banner .box-banner-ab ul{
	list-style: none;
	padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
}
.banner .box-banner-ab ul li{
	float: left;
}
.banner .box-banner-ab ul li:nth-child(1) {
    width: 100%;
    position: relative;
}
.banner .box-banner-ab ul li:nth-child(1) .box-title {
    position: absolute;
    bottom: 30px;
    left: 10%;
}

.banner .box-banner-ab h1{
	font-size: 82px;
	text-align: left;
	font-weight: 900;
}
.banner .box-banner-ab p{
	color: #fff;
	font-size: 18px;
	line-height: 26px;
	font-weight: 900;
	text-align: left;
	margin: 0;
}

@media only screen and (max-width: 1500px) {
	.banner .box-banner-ab ul li:nth-child(1) .box-title {
	    left: 0;
	}
	.banner .box-banner-ab {
	    left: 40px;
	}
}
@media only screen and (max-width: 1400px) {
	.banner .box-banner-ab h1 {
	    font-size: 76px;
	}
}
@media only screen and (max-width: 1361px) {
	.banner .box-banner-ab h1 {
	    font-size: 64px;
	}
}
@media only screen and (max-width: 1058px) {
	.banner .box-banner-ab {
	    width: 70%;
	    bottom: 0;
	    right: 0px;
	}
	.banner .box-banner-ab h1 {
	    font-size: 56px;
	}
}
@media only screen and (max-width: 923px) {
	.banner .box-banner-ab h1 {
	    font-size: 48px;
	}
}
@media only screen and (max-width: 850px) {
	.banner .box-banner-ab {
	    width: 80%;
	}
}
@media only screen and (max-width: 816px) {
	.banner .box-banner-ab {
	    width: 82%;
	}
}
@media only screen and (max-width: 767px) {
	.banner{
		height: 100vh;
	}
	.banner .box-banner-ab .box-link p {
		font-size: 13px;
		text-align: center;
		line-height: 8px;
	}
	.banner .box-banner-ab .box-link i {
		font-size: 22px;
		margin-top: 7px;
	}
	.banner .box-banner-ab h1 {
	    font-size: 38px;
	    text-align: left;
	    font-weight: 900;
	    padding-bottom: 10px;
	}
	.banner .box-banner-ab p {
		font-size: 16px;
		text-align: left;
		line-height: 24px;
		margin-top: 1px;
	}
	
	.banner .box-banner-ab ul {
		display: block;
	    height: 100%;
	}
	.banner .box-banner-ab {
	    width: 100%;
	    height: 100%;
	    left: 0;
	}
	.banner .box-banner-ab ul li {
	    float: unset;
	}
	.banner .box-banner-ab ul li:nth-child(1){
	    width: 100%;
	    height: 100%;
	}
	.banner .box-banner-ab ul li:nth-child(1) .box-title {
		padding: 15px 30px;
	    width: 100%;
	    bottom: 0;
	    top: unset;
	    left: 0;
	    -moz-transform: unset;
	    -webkit-transform: unset;
	    -ms-transform: unset;
	    transform: unset;
	   /* width: 80%;
	    bottom: unset;
	    top: 230px;
	    left: 50%;
	    -moz-transform: translate(-50%, -50%);
	    -webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);*/
	}
	.banner .box-banner-ab ul li:nth-child(1) .box-title {

	}
}
#phome {
    font-family: 'Prompt', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.015em;
	color: #000000;

}
.wrap:lang(en) #section-des {
    font-family: Prompt,sans-serif!important;
}
#section-des ol,
#section-des ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/*start main setting*/
.owl-nav span {
    font-size: 52px;
}
.owl-carousel{
	display: block;
}
.prelative {
    position: relative !important;
}

.w-100 {
    width: 100% !important;
}

.m-auto {
    margin: auto !important;
}
.d-block{
	display: block!important;
}
.d-flex {
    display: flex !important;
}
.layer {
	background: rgba(18, 9, 9, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.mscolor{
	color: var(--msColor)!important;
}
.middle{
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.bg-mscolor{
	background-color: var(--msColor);
}
.text-white{
	color: white!important;
}
/*end main setting*/

/*start index setting*/
#phome h2{
	color: #000;
	font-weight: 600;
	font-size: 75px;
	line-height: 79px;
}
#phome h3{
	font-weight: 600;
	font-size: 72px;
	line-height: 86px;
}
#phome h4{
	font-weight: 700;
	font-size: 52px;
	line-height: 61px;
}
#phome h5{
	font-weight: 700;
	font-size: 48px;
	line-height: 56px;
}
#phome .h7{
	font-weight: 600;
	font-size: 43px;
	line-height: 46px;
}
#phome .h8{
	font-weight: 600;
	font-size: 40px;
	line-height: 42px;
}
#phome .h9{
	font-weight: 700;
	font-size: 32px;
	line-height: 42px;
}
#phome .h10{
	font-weight: 300;
	font-size: 24px;
	line-height: 36px;
}
#phome .h11{
	font-weight: 700;
	font-size: 23px;
	line-height: 31px;
}
#phome .h12 {
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
}
#phome .h13{
	font-weight: 600;
	font-size: 16px;
	line-height: 21px;
}
#phome .h14{
	font-weight: 300;
	font-size: 18px;
	line-height: 30px;
}
#phome .h15{
	font-weight: 300;
	font-size: 16px;
	line-height: 21px;
}
#phome .h16{
	font-weight: 700;
	font-size: 14.5662px;
	line-height: 18px;
}
#phome .readmore {
    text-decoration: underline!important;
    border: 1px solid #000;
    padding: 5px 30px 10px;
    color: #000;
}
#phome .readmore:hover{
	background: #b5ff6d;
}
#phome .owl-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin-top: 10px;
}
#phome .owl-dots button.owl-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    background: #e6e6e6;
    margin: 0 5px;
    border: 1px solid #ddd;
}
#phome .owl-theme .owl-dots .owl-dot span {
    display: none!important;
}
#phome .owl-dots button.owl-dot.active {
    background: var(--msColor);
}
#phome .allproduct{
	font-weight: 300;
	font-size: 18px;
	line-height: 27px;
}
/*.rotate-me {
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
    -webkit-animation-name: rotate;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(359deg);}
}*/
/*end index setting*/
#box1 {
	margin: 43px 0;
	background: url(/assets/images/index2/d/bg_jongstit.webp) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	min-height: 607px;
}
#box1 div:nth-child(1) .layer{
	height: 100%;
}
#box1 .logojong{
	left: 28%;
}
#box1 .content {
    background: rgba(18, 9, 9, 0.5);
    color: #ffffff;
    width: 100%;
    max-width: 43%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}
#box1 .content .b-right {
    width: 100%;
    max-width: 62%;
}
#box1 h5{
	padding-bottom: 30px;
}
#box1 p.h9{
	padding-bottom: 10px;
}

#box2{
	padding-top: 30px;
}
#box2 .title-content{
	padding-top: 38px;
	padding-bottom: 40px;
}
#box2 .title-content ul li{
	float: left;
	width: 20%;
}
#box2 .title-content ul li p{
	padding-top: 28px;
}
#box2 .bottom .content{
	padding: 57px;
}
#box2 .bottom p.h14{
	max-width: 430px;
	padding-bottom: 40px;
}
#box2 .title-content ul li:hover{
	cursor: pointer;
}
#box2 .owl-box2 img{
	height: 100%!important;
}
#box3 .col{
	float: left
}
#box3 .col-5{
	width: 36%;
	background: #F7F7F6;
	box-shadow: 0px 5px 18px rgba(0, 0, 0, 0.25);
	z-index: 1;
}
#box3 .col-7{
	width: 64%;
	padding: 58px 0px;
}
#box3 .box{
	position: absolute;
}
#box3 .content{
	height: 100%;
}
#box3 .box-end{
	max-width: 308px;
	padding: 90px 0;
}
#box3 .box-end img{
	padding-top: 50px;
    padding-bottom: 48px;
}
#box3 .c1 {
    top: 13%;
    left: 38%;
}
.wrap:lang(th) #box3 .c2{
    bottom: 6%;
}
#box3 .c2,
#box3 .c3{
    bottom: 12%;
}
#box3 .c2 {
    left: 12%;
}
#box3 .c3 {
    left: 38%;
}
.wrap:lang(th) #box3 .c3,
.wrap:lang(th) #box3 .c4{
    bottom: 12%;
}
#box3 .c4 {
    left: 69%;
    bottom: 14.8%;
}
#box4{
	background: #fff;
	padding: 68px 0;
}
#box4 .text-white{
	color: #000!important;
}

#box2 .container,
#box4 .container,
#box6 .container,
#box7 .container,
#box8 .container{
	max-width: 1245px;
}
#box4 .title ul{
	width: 100%;
	display: flex;
}
#box4 .title ul li{
	float: left;
}
#box4 .title ul li:nth-child(1){
	width: 44%;
}
#box4 .title ul li:nth-child(2){
	width: 56%;
	padding-top: 13px;
}
#box4 .title ul li:nth-child(2) .line{
	width: 100%;
	height: 1px;
	background: var(--msColor);
}

#box4 .byfabrictype .ptitle a{
	float: right;
}
#box4 .title ul + p{
	padding: 50px 0 35px 0;
}
#box4 .control-slide .col-custom{
	float: left;
}
#box4 .pslide{
	box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.25);
}
#box4 .control-slide .col-custom:nth-child(1){
	background: var(--msColor);
	width: 11%;
	overflow: hidden;
}
#box4 .control-slide .col-custom:nth-child(2){
	width: 55%;
}
#box4 .control-slide .col-custom:nth-child(3){
	width: 34%;
}
#box4 .control-slide{
    display: table;
}
#box4 .control-slide .col-custom:nth-child(2) > div{
	padding: 28px 20px 0 80px;
}
#box4 .p{
	padding: 3px;
}
#box4 .content-end {
    padding: 62px 67px 0px 20px;
}
#box4 .m-0{
	margin: 0;
}
#box4 .title .allproduct{
	display: block;
	padding:15px 0;
}
#box4 .title .allproduct + p {
    padding-bottom: 30px;
}
#box4 .content-end img{
	padding-bottom: 10px;
}
#box4 .content-end a {
    text-decoration: underline!important;
}
#box4 .sportswear .bgroup a{
	padding-bottom: 25px;
    text-decoration: underline;
    display: inline-block;
}
#box4 .aright{
	display: inline-block;
	width: 16px;
}
#box4 .owl-carousel .owl-nav.disabled {
    display: block;
}
#box4 .owl-nav button.owl-prev {
    left: -75px;
}
#box4 .owl-nav button.owl-next {
    right: -75px;
}
#box4 .owl-nav button {
    background: #ffffff00!important;
}
#box4 .owl-theme .owl-nav [class*=owl-] {
    color: #fff;
}
#box4 .owl-theme .owl-nav [class*=owl-]:hover {
    color: var(--msColor);
}
#box4 .owl-dots{
	opacity: 0;
	visibility: hidden;
}
#box4 .lineheight{
	width: 100%;
	height: 1px;
	background: var(--msColor);
	margin: 100px 0 55px;
}
#box4 .byfabrictype{
	display: inline-block;
}
#box4 .byfabrictype ul{
	width: 100%;
}
#box4 .byfabrictype ul li{
	float: left;
}
#box4 .byfabrictype ul li:nth-child(1){
	width: 39%;
	padding-right: 4px;
}
#box4 .byfabrictype ul li:nth-child(2){
	width: 30.5%;
}
#box4 .byfabrictype ul li:nth-child(3){
	width: 30.5%;
}
#box4 .byfabrictype ul li:nth-child(2),
#box4 .byfabrictype ul li:nth-child(3){
	padding-left: 50px;
}
#box4 .byfabrictype .area p.h15 {
    height: 116px;
}
#box4 .title ul + p + p,
#box4 .byfabrictype .ptitle,
#box4 .fromourfabric .ptitle{
	padding-bottom: 10px;
}
#box4 .byfabrictype .bcontent .area {
    padding: 50px 0 100px;
    max-width: 360px;
    margin: unset;
}
#box4 .byfabrictype .bcontent .area .bgroup a.h12 {
    text-decoration: underline!important;
}
#box4 .byfabrictype .bcontent .area p.h15{
	padding-top: 10px;
}
#box4 .byfabrictype .bcontent>a{
	position: relative;
	display: block;
}
#box4 .byfabrictype .bcontent>a img{
	-webkit-transition: .6s;
    transition: .6s;
}
#box4 .byfabrictype .bcontent>a picture:nth-child(1) img {
    visibility: visible;
    opacity: 1;
}
#box4 .byfabrictype .bcontent>a picture:nth-child(2) img {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
}
#box4 .fromourfabric .fimg a{
	position: relative;
	display: inline-block;
}
#box4 .fromourfabric .fimg a p {
	max-width: 200px;
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    color: #000;
    text-decoration: underline!important;
    padding: 1px 10px;
    border-radius: 15px;
    border: 1px solid var(--msColor);
}
#box4 .fromourfabric .fimg a p:hover{
	background: var(--msColor);
    color: #fff;
}
#box5,
#box6,
#box8{
    background: #fff;
}
#box5 {
    display: inline-block;
    padding: 100px 0;
    width: 100%;
}
#box5 ul{
    width: 100%;
}
#box5 ul li{
	float: left;
}
#box5 ul li:nth-child(1){
	width: 55%;
}
#box5 ul li:nth-child(2){
	width: 45%;
	background: var(--msColor);
}
#box5 #box-video{
	width: 100%;
    height: 100%;
    background: url(/assets/images/index/desktop/Eng/cover-vdo-recycle-fabric-2.webp) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#box5 #box-video video{
    object-fit: cover;
    height: 100%;
}
#box5 .content {
    padding: 123px 123px 26px 123px;
}
#box5 .content h2{
	padding-bottom: 45px;
}
#box5 .content img{
	display: block;

	margin: auto;
}
#box5 .content h5{
	padding-bottom: 100px;
}
#box5 .content .readmore {
    margin: auto;
    display: inherit;
    max-width: 178px;
    margin-top: 20px;
}
#box6{
	padding-bottom: 115px;
}
#box6 h3{
	color: #000;
}
#box6 .title p{
	padding: 20px 0 130px;
}
#box6 .pr{
	padding-right: 40px;
}
#box6 .pl{
	padding-left: 40px;
}
#box6 .bbox{
	position: relative;
}
#box6 .bbox .bhover {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 16px 63px;
    /*background: #2b86006e;
    background-blend-mode: color;*/
}
#box6 .bbox .bhover p{
	margin: 0;
}
#box7{
	width: 100%;
    background: url(/assets/images/index2/d/bg_recycled_polyester_fabric_manufacturer.webp) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 40px 0;
}

#box7 .content {
	display: inline-block;
    width: 100%;
    max-width: 658px;
    margin: 0;
    background: #fff;
    padding: 20px 55px 134px;
}
#box7 .content h5 + p{
	padding: 0 0 68px;
}
#box7 ul{
	width: 100%;
	margin-top: 30px;
}
#box7 ul li {
    position: relative;
    float: left;
    width: 23%;
    height: 132px;
    border-radius: 7px;
    padding: 10px;
    margin-left: 3px;
    margin-right: 3px;
}
#box7 ul li:nth-child(1){
	background: #FF680D;
}
#box7 ul li:nth-child(2){
	background: #24B001;
}
#box7 ul li:nth-child(3){
	background: #D3350E;
}
#box7 ul li:nth-child(4){
	background: #0DB3CA;
}
#box7 ul li p{
	position: absolute;
	left: 5px;
	bottom: 5px;
	color: white;
}

#box8{
	padding: 84px 0 64px;
}
#box8 ul{
	width: 100%;
}
#box8 ul li {
    float: left;
    height: 50px;
    display: contents;
}
#box8 ul li:nth-child(1){
 	width: 58%;
}
#box8 ul li:nth-child(2){
	width: 42%;
}
#box8 .content h5{
	padding-bottom: 30px;
}
/*start accordian*/
	.accordian {
		background: var(--msColor);
		width: 250px;
		float: left;
		overflow-x: hidden;
		position: relative;
	}
	.main-navbar{
		position: relative;
	}

	.accordian li {
		list-style-type: none;
	}

	.accordian ul li a{
		color: rgba(255,255,255,0.5);
	    text-decoration: none;
	    text-align: center;
	    display: block;
	    padding: 19px 0;
	    transition-duration:0.6s;
		transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	    position: relative;
	}

	.accordian>ul>li.active>a{
		color: var(--msColor);
		background-color: transparent;
		transition: all 0.7s;
	}


	.accordian a:not(:only-child):after {
		content: "\f105";
		position: absolute;
		right: 20px;
		top: 10%;
		font-size: 14px;
		font-family: "Font Awesome 5 Free";
		display: inline-block;
		padding-right: 3px;
		vertical-align: middle;
		font-weight: 900;
		transition: 0.5s;
	}

	.accordian .active>a:not(:only-child):after {
		transform: rotate(90deg);
	}
	.selector-active {
	    width: 100%;
	    display: inline-block;
	    position: absolute;
	    left: 0px;

	    top: 0px;
	    height: 66px;


	    transition-duration: 0.6s;
	    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	    background-color: #fff;
	    /* border-top-left-radius: 0; */
	    /* border-bottom-left-radius: 0; */
	}
	.selector-active .top,
	.selector-active .bottom{
		position: absolute;
		width: 25px;
		height: 25px;
		background-color: #fff;
		right: 0;
	}
	.selector-active .top{
		top: -25px;
	}
	.selector-active .bottom{
		bottom: -25px;
	}
	.selector-active .top:before,
	.selector-active .bottom:before{
		content: '';
	    position: absolute;
	    width: 50px;
	    height: 50px;
	    border-radius: 50%;
	    background-color: var(--msColor);
	}
	.selector-active .top:before{
		left: -25px;
		top: -25px;
	}
	.selector-active .bottom:before{
		bottom: -25px;
		left: -25px;
	}
/*end accordian*/
@media only screen and (max-width: 1750px) {
	#box3 .c1 {
	    left: 36%;
	}
	#box3 .c2 {
	    left: 8%;
	}
	#box3 .c3 {
	    left: 36%;
	}
	#box3 .c4 {
	    left: 71%;
	}
}
@media only screen and (max-width: 1650px) {
	#box3 .c2 {
	    left: 5%;
	}
}
@media only screen and (max-width: 1620px) {
	#box1 .content .b-right {
	    max-width: 75%;
	}
}
@media only screen and (max-width: 1550px) {
	#box3 .col-7 {
	    width: 64%;
	    padding: 58px 26px;
	}
	#box3 .c1 {
	    left: 35%;
	}
	#box3 .c2 {
	    left: 3%;
	}
	#box3 .c3 {
	    left: 35%;
	}
	#box3 .c4 {
	    left: unset;
	    right: 6%;
	}
}
@media only screen and (max-width: 1520px) {
	#box3 .c2, #box3 .c3 {
	    bottom: 14%;
	}
	#box3 .c4 {
	    bottom: 16.7%;
	}
	#box5 .content h5 {
	    padding-top: 50px;
	}
}
@media only screen and (max-width: 1500px) {
	.wrap:lang(th) #box3 .c2{
		bottom: 10%;
	}
	#box3 .c2, #box3 .c3 {
	    bottom: 12%;
	}
	.wrap:lang(th) #box3 .c3,
	.wrap:lang(th) #box3 .c4 {
	    bottom: 15.8%;
	}
	#box3 .c4 {
	    bottom: 14.8%;
	}
}
@media only screen and (max-width: 1450px){
	#box3 .c2, #box3 .c3 {
	    bottom: 16%;
	}
	#box3 .c4 {
	    bottom: 18.8%;
	}
}
@media only screen and (max-width: 1420px) {
	#box3 .c2, #box3 .c3 {
	    bottom: 18%;
	}
	#box3 .c4 {
	    bottom: 20.8%;
	}
}
@media only screen and (max-width: 1400px) {
	.wrap:lang(th) #box3 .c2 {
	    bottom: 14%;
	}
	.wrap:lang(th) #box3 .c3, .wrap:lang(th) #box3 .c4 {
	    bottom: 19.8%;
	}
	#box3 .c2, #box3 .c3 {
	    bottom: 16%;
	}
	#box3 .c4 {
	    bottom: 18.8%;
	}
	#box5 .content {
	    padding: 60px;
	}
}
@media only screen and (max-width: 1370px) {
	.wrap:lang(th) #box3 .c2 {
	    bottom: 14%;
	}
	.wrap:lang(th) #box3 .c3, .wrap:lang(th) #box3 .c4 {
	    bottom: 19.8%;
	}
	.wrap:lang(th) #box3 .c3 {
	    left: 35%;
	}
	#box3 .c1 {
	    top: 12%;
	}
	#box3 .c2, #box3 .c3 {
	    bottom: 19%;
	}
	#box3 .c3 {
	    left: 32%;
	}
	#box3 .c4 {
	    bottom: 21.8%;
	}
	#box4 .owl-nav button.owl-prev {
	    left: -44px;
	}
	#box4 .owl-nav button.owl-next {
	    right: -44px;
	}
}
@media only screen and (max-width: 1355px) {
	.wrap:lang(th) #box3 .c1 {
	    top: 13%;
	}
	.wrap:lang(th) #box3 .c2 {
	    bottom: 14%;
	}
	.wrap:lang(th) #box3 .c3, .wrap:lang(th) #box3 .c4 {
	    bottom: 19.8%;
	}
}
@media only screen and (max-width: 1370px) {
	.wrap:lang(th) #box1 .content .b-right {
	    max-width: 80%;
	}
	#box3 .c2, #box3 .c3 {
	    bottom: 21%;
	}
	#box3 .c4 {
	    bottom: 23.7%;
	}
}
@media only screen and (max-width: 1350px) {
	#box3 .c2, #box3 .c3 {
	    bottom: 19%;
	}
	#box3 .c4 {
	    bottom: 21.8%;
	}
	#box3 .c3 {
	    left: 31%;
	}
	#box4 .owl-nav button.owl-prev {
	    left: 20px;
	}
	#box4 .owl-nav button.owl-next {
	    right: 20px;
	}
	#box2 .container, #box4 .container, #box6 .container, #box7 .container, #box8 .container {
	    max-width: 1145px;
	}
}
@media only screen and (max-width: 1320px) {
	/*#box1 .content .b-right {
	    max-width: 80%;
	}
*/
	#box1 .content .b-right {
	    max-width: 85%;
	}
	.wrap:lang(th) #box1 .content .b-right {
	    max-width: 81%;
	}
	.wrap:lang(th) #box3 .c2 {
	    bottom: 16%;
	}
	.wrap:lang(th) #box3 .c3, .wrap:lang(th) #box3 .c4 {
	    bottom: 21.8%;
	}
	#box3 .c2, #box3 .c3 {
	    bottom: 22%;
	}
	#box3 .c4 {
	    bottom: 24.8%;
	}
}
@media only screen and (max-width: 1280px) {
	.wrap:lang(th) #box1 .content .b-right {
	    max-width: 83%;
	}
	.wrap:lang(th) #box3 .c2 {
	    bottom: 18%;
	}
	.wrap:lang(th) #box3 .c3, .wrap:lang(th) #box3 .c4 {
	    bottom: 23.8%;
	}
	#box3 .c2, #box3 .c3 {
	    bottom: 25%;
	}
	#box3 .c4 {
	    bottom: 27.8%;
	}
}
@media only screen and (max-width: 1260px) {
	#box1 .content {
	    max-width: 50%;
	}
}
@media only screen and (max-width: 1250px) {
	#box3 .d-flex {
	    display: block !important;
	}
	#box3 .col-5 {
	    width: 100%;
	}
	#box3 .col-7 {
	    width: 100%;
	    padding: 72px 26px 223px;
	}
	.wrap:lang(th) #box3 .c1 {
	    top: 15%;
	    left: 38%;
	}
	.wrap:lang(th) #box3 .c2 {
	    bottom: 5%;
	}
	.wrap:lang(th) #box3 .c3, .wrap:lang(th) #box3 .c4 {
	    bottom: 10.8%;
	}
	.wrap:lang(th) #box3 .c3 {
	    left: 37%;
	}
	.wrap:lang(th) #box3 .c4 {
	    bottom: 10.8%;
	    right: 13%;
	}
	#box3 .c1 {
	    top: 16%;
	    left: 38%;
	}
	#box3 .c2, #box3 .c3 {
	    bottom: 4%;
	}
	#box3 .box-end {
		text-align: center;
	    max-width: 900px;
	}
	#box3 .box-end h2 br{
		display: none;
	}
	#box3 .c2 {
	    left: 12%;
	}
	#box3 .c3 {
	    left: 38%;
	}
	#box3 .c4 {
	    bottom: 6.8%;
	    right: 16%;
	}

}
@media only screen and (max-width: 1150px){
	#box3 .c1 {
	    top: 16%;
	    left: 37%;
	}
	#box3 .c2 {
	    left: 10%;
	}
	#box3 .c3 {
	    left: 37%;
	}
	#box3 .c4 {
	    right: 13%;
	}
}
@media only screen and (max-width: 1124px){
	#box5 ul li:nth-child(1),
	#box5 ul li:nth-child(2) {
	    width: 50%;
	}
}
@media only screen and (max-width: 1100px){
	#box3 .c2 {
	    left: 8%;
	}
	#box3 .c4 {
	    right: 11%;
	}
}
@media only screen and (max-width: 1050px){
	.wrap:lang(th) #box3 .c4 {
	    right: 5%;
	}
	#box3 .c2 {
	    left: 6%;
	}
	#box3 .c4 {
	    right: 8%;
	}
}
@media only screen and (max-width: 1024px){
	#box1 {
	    min-height: 530px;
	}
	.wrap:lang(th) #box1 .content .b-right h5{
		font-size: 44px;
	}
	#box4 .control-slide .col-custom:nth-child(2) > div {
	    padding: 28px 20px 0 50px;
	}
	#box3 .box-end {
	    padding: 90px 40px;
	}
	#box4 .content-end {
	    padding: 62px 40px 0px 20px;
	}
	#box5 .content {
	    padding: 40px;
	}
	#box6 .title p {
	    padding: 20px 0 60px;
	}
}
@media only screen and (max-width: 950px){
	#box3 .c2 {
	    left: 4%;
	}
	#box3 .c3 {
	    left: 35%;
	}
	#box3 .c4 {
	    right: 6%;
	}
}
@media only screen and (max-width: 900px){
	/*start index setting*/
	#phome h2{
		font-size: 65px;
		line-height: 69px;
	}
	#phome h3{
		font-size: 62px;
		line-height: 76px;
	}
	#phome h4{
		font-size: 42px;
		line-height: 51px;
	}
	#phome h5{
		font-size: 38px;
		line-height: 46px;
	}
	#phome .h7{
		font-size: 36px;
		line-height: 46px;
	}
	#phome .h8{
		font-size: 33px;
		line-height: 42px;
	}
	#phome .h9{
		font-size: 28px;
		line-height: 38px;
	}
	#box2 .container, #box4 .container, #box6 .container, #box7 .container, #box8 .container {
	    width: 100%;
	    max-width: 100%;
	}
	.wrap:lang(th) #box1 .content .b-right h5{
		font-size: 36px;
	}
	#box1 {
	    min-height: 690px;
	}
	#box3 .c2, #box3 .c3 {
	    bottom: 6%;
	}
	#box3 .c4 {
	    bottom: 8.8%;
	}
	#box4 .byfabrictype ul li:nth-child(2), #box4 .byfabrictype ul li:nth-child(3) {
	    padding-left: 15px;
	}
	#box4 .byfabrictype {
	    margin-bottom: 60px;
	}
	#box4 .content-end {
	    padding: 62px 20px 0px 10px;
	}
	#box4 .lineheight {
	    margin: 55px 0 55px;
	}
}
@media only screen and (max-width: 850px){
	#phome .h12 {
	    font-size: 19px;
	}
	.wrap:lang(th) #box1 .content .b-right h5 {
	    font-size: 35px;
	}
	#box3 .c4 {
	    right: 4%;
	}
	#box5 .content {
	    padding: 20px;
	}
}
@media only screen and (max-width: 780px){
	#phome h2 {
	    font-size: 60px;
	    line-height: 69px;
	}
	.wrap:lang(th) #box3 .c2 {
	    bottom: 7%;
	}
	.wrap:lang(th) #box3 .c3 {
	    left: 38%;
	}
	.wrap:lang(th) #box3 .c3,
	.wrap:lang(th) #box3 .c4 {
	    bottom: 12.8%;
	}
}
@media only screen and (max-width: 767px){
	body{
		--ppad:20px;
	}
	/*start index setting*/
	#phome h2{
		font-size: 40px;
		line-height: 42px;
	}
	#phome h3{
		font-weight: 700;
		font-size: 32px;
		line-height: 42px;
	}
	/*#phome h4{
		font-weight: 700;
		font-size: 52px;
		line-height: 61px;
	}*/
	#phome h5,
	.wrap:lang(th) #box1 .content .b-right h5{
		font-size: 32px;
		line-height: 42px;
	}
	#phome .h7{
		font-weight: 700;
		font-size: 21px;
		line-height: 28px;
	}
	/*#phome .h8{
		font-weight: 600;
		font-size: 40px;
		line-height: 42px;
	}*/
	#phome .h9{
		font-size: 21px;
		line-height: 28px;
	}
	#phome .h10{
		font-size: 16px;
		line-height: 21px;
	}
	#phome .h11{
		font-weight: 600;
		font-size: 16px;
		line-height: 21px;
	}
	#phome .h12{
		font-size: 21px;
		line-height: 28px;
	}
	#phome .h13{
		font-size: 16px;
		line-height: 21px;
	}
	#phome .h14{
		font-size: 16px;
		line-height: 21px;
	}
	/*#phome .h15{
		font-weight: 300;
		font-size: 16px;
		line-height: 21px;
	}*/
	#phome .h16{
		font-weight: 700;
		font-size: 16.8786px;
		line-height: 21px;
	}
	/*end setting*/
	#box1 {
		display: block!important;
	    margin: 0;
	    padding: 0;
	    background: #1a1616;
	    min-height: 100%;
	}
	#box1 .bg_jongstit{
		width: 100%;
	}
	#box1 .content {
	    max-width: 100%;
	    position: unset;
	}
	#box1 .content .b-right,
	.wrap:lang(th) #box1 .content .b-right {
	    max-width: 100%;
	    padding: 26px var(--ppad) 30px;
	}
	#box1 h5 {
	    padding-bottom: 32px;
	}
	#box1 p.h9 {
	    padding-bottom: 3px;
	}
	#box1 .logojong {
	    left: 50%;
	    width: 115px;
	}

	#box2 {
	    padding: 38px var(--ppad) 15px;
	}
	#box2 .bottom .content {
	    padding: 36px 0;
	}
	#box2 .title-content {
	    display: none;
	}
	#box2 .bg-mscolor {
	    background-color: #fff;
	}
	#box2 .owl-dots{
		width: 100%;
	}
	#box2 .owl-dots button.owl-dot {
	    -webkit-border-radius: 0;
	    -moz-border-radius: 0;
	    border-radius: 0;
	    width: 20%;
	    height: 5px;
	    margin-left: 0;
	    margin-right: 0;
	    background: #ccc;
	    border: none;
	}
	#box2 h2{
		text-align: left;
	}
	#box2 .bottom p.h14 {
	    max-width: 100%;
	    padding-bottom: 0;
	    height: 185px;
	    padding-top: 8px;
	}
	#box2 .owl-dots {
	    bottom: -27px;
	}
	#box3 .box-end {
	    padding: 21px 35px 48px;
	    box-shadow: 5px 10px 8px -2px rgb(0 0 0 / 15%);
	}
	#box3 .b-mobile{
		display: block!important;
	}
	.wrap:lang(th) #box3 .b-mobile{
		display: none!important;
	}
	#box3 h2{
		text-align: left;
	}
	#box3 .box-end img {
	    margin-left: auto;
	    display: block;
	    padding-top: 69px;
	    padding-bottom: 58px;
	}
	#box3 p.h14{
		text-align: left;
	}
	#box3 .col-5 {
	    background: #F7F7F6;
	    box-shadow: unset;
	}
	#box3 .col-7 {
	    margin-top: 15px;
	    padding: 72px 26px 184px;
	    border-bottom: 1px solid #D9D9D9;
	}
	#box3 .box h4{
		font-weight: 700;
		font-size: 21px;
		line-height: 28px;
	}
	.wrap:lang(th) #box3 .c1 {
	    top: 9%;
	    left: 7%;
	}
	.wrap:lang(th) #box3 .c2 {
	    bottom: 23%;
	}
	.wrap:lang(th) #box3 .c3 {
	    bottom: 20.8%;
	    left: 36%;
	}
	.wrap:lang(th) #box3 .c4 {
	    right: 7%;
	    bottom: 13.8%;
	}
	#box3 .c1 {
	    top: 7%;
	}
	#box3 .c2 {
	    bottom: 24%;
	}
	#box3 .c1,
	#box3 .c2{
		left: 6%;
	}
	#box3 .c3 {
	    left: 35%;
	    bottom: 18%;
	}
	#box3 .c4 {
	    right: 10%;
	    bottom: 11.8%;
	}

	#box4 {
	    padding: 33px 0 49px;
	}
	#box4 .title ul li:nth-child(1) {
	    width: 100%;
	}
	#box4 .control-slide .col-custom:nth-child(2) {
	    width: 100%;
	}
	#box4 .title ul + p,
	#box4 .pslide .item .fimg,
	#box4 .control-slide .col-custom:nth-child(1),
	#box4 .control-slide .col-custom:nth-child(3),
	#box4 .control-slide .col-custom:nth-child(2) .sportswear p:last-child,
	#box4 .title ul li:nth-child(2),
	#box4 .control-slide .col-custom:nth-child(2) > div .aright{
		display: none!important;
	}
	#box4 .control-slide {
	    display: block;
	}
	#box4 .fabric-logo {
	    width: 80px!important;
	    height: 80px!important;
	    display: block;
	    margin-left: auto;
	    margin-top: 15px;
	}
	#box4 .control-slide .col-custom:nth-child(2) > div {
	    padding: 16px 20px 20px 16px;
	    text-align: left;
	}
	#box4 .btn-slide.bg-white{
		background: unset;
	}
	#box4 .pslide .owl-item {
	    background: #fff;
	    border-radius: 10px;
	}
	#box4 .title .allproduct,
	#box4 .title .allproduct + p{
		display: none;
	}
	#box4 .owl-carousel .owl-nav.disabled{
		display: none!important;
	}
	#box4 .lineheight{
		background: #939191;
	}
	#box4 .title ul + p + p, #box4 .byfabrictype .ptitle, #box4 .fromourfabric .ptitle {
	    padding-bottom: 8px;
	}
	#box4 .title h2 {
	    padding-bottom: 38px;
	}
	#box4 .pslide + .lineheight {
	    margin: 40px 0 30px;
	}
	#box4 .byfabrictype {
	    margin-bottom: 25px;
	}
	#box4 .byfabrictype ul li {
	    float: unset;
	    width: 100%!important;
	}
	#box4 .byfabrictype {
	    display: block;
	}
	#box4 .byfabrictype .bcontent .area p.h15{
		display: none;
	}
	#box4 .byfabrictype .bcontent{
		position: relative;
	}
	#box4 .byfabrictype .bcontent .area {
	    padding: 15px;
	    max-width: 100%;
	    margin: unset;
	    position: absolute;
	    bottom: 24px;
	    left: 13px;
	    width: 100%;
	}
	#box4 .byfabrictype .bcontent .area .bgroup a.h12 {
	    color: #fff!important;
	    text-decoration: unset!important;
	}
	#box4 .byfabrictype .bcontent .area .aright {
	    display: inline-block;
	    width: 16px;
	    float: right;
	    margin-right: 34px;
	    padding-top: 7px;
	}
	#box4 .byfabrictype ul li:nth-child(2), #box4 .byfabrictype ul li:nth-child(3) {
	    padding-left: 0;
	}
	#box4 .byfabrictype + .lineheight {
	    margin: 31px 0 46px;
	}
	#box4 .fromourfabric .ptitle.h12{
		font-weight: 700;
	}
	#box4 .fromourfabric .fimg a {
	    box-shadow: 5px 10px 8px -2px rgba(0, 0, 0, 0.15);
	}
	#box4 .title p.h12{
		font-weight: 700;
	}
	.wrap:lang(th){
		font-size: 14px;
	}
	#box4 .sportswear .bgroup a {
		font-weight: 600;
		font-size: 16px;
		line-height: 21px;
		color: #000;
		text-decoration: unset;
	    padding-bottom: 8px;
	}
	#box4 .fromourfabric .fimg a p {
    	max-width: 100%;
    	text-decoration: unset!important;
    	border: unset;
	}
	#box4 .pslide {
	    box-shadow: unset;
	}
	#box4 .control-slide .sportswear {
	    box-shadow: 5px 10px 8px -2px rgba(0, 0, 0, 0.15);
	    margin-bottom: 15px;
	}

	#box5 {
	    padding: 12px 0;
	}
	#box5 ul {
	    display: block!important;
	    width: 100%;
	}
	#box5 #box-video {
	    background: unset;
	    margin-bottom: -7px;
	}
	#box5 ul li {
	    float: unset;
	}
	#box5 ul li:nth-child(1), #box5 ul li:nth-child(2) {
	    width: 100%;
	}
	#box5 .content {
	    text-align: center;
	    padding: 65px 40px 24px;
	}
	#box5 .content h2{
		padding-bottom: 28px;
	}
	#box5 .content h5 {
		padding-top: 0;
	    padding-bottom: 24px;
	}
	#box5 .content .readmore {
	    margin-top: 15px;
	    border: 1px solid #63ac1c;
	}
	#box6 {
	    padding: 36px 0 87px;
	}
	#box6 .title p {
	    padding: 15px 0 39px;
	}
	#box6 .pr {
	    padding-right: 15px;
	}
	#box6 .pl {
	    padding-left: 15px;
	}
	#box6 .title p {
	    padding: 15px 0 29px;
	}
	#box6 .h9 {
	    font-weight: 700;
		font-size: 32px;
		line-height: 42px;
	}
	#box6 .bbox .bhover {
	    padding: 20px 20px 10px;
	    background: unset;
	}
	#box6 .owl-dots{
		bottom: -82px;
	}
	#box7 {
	    background: url(/assets/images/index2/m/bg_recycled_polyester_fabric_manufacturer.webp) no-repeat;
	    background-size: 100% 100%;
	    padding: 0px 0 15px;
	}
	#box7 .content {
		width: 100%;
    	max-width: 100%;
	    background: unset;
	    padding: 0;
	}
	#box7 h5,
	#box7 p{
		color: #fff;
	}
	#box7 .content h5 + p {
	    width: 100%;
	    max-width: 275px;
	}
	#box7 ul li {
	    width: 44%;
	    height: 132px;
	    padding: 10px;
	    margin-left: 10px;
	    margin-right: 10px;
	    margin-bottom: 20px;
	}
	#box8 {
	    padding: 0;
	}
	#box8 .container{
		padding: 0;
	}
	#box8 .d-flex{
		display: block!important;
	}
	#box8 .content {
	    padding: 27px 40px 45px 46px;
	}
	#box8 .content img {
	    width: auto;
	    display: block;
	    margin-left: auto;
	    margin-top: 28px;
	}
	#box8 .content h5 {
	    padding-bottom: 0;
	}
}
@media only screen and (max-width: 414px){
	#box7 ul li {
	    width: 36%;
	}
}
@media only screen and (max-width: 390px){
	.wrap:lang(th) #box4 .sportswear .bgroup a {
	    font-size: 14px;
	}
	#box7 ul li {
	    width: 39%;
	}
}
@media only screen and (max-width: 375px){
	.wrap:lang(th) #box3 .c3 {
	    bottom: 21.8%;
	}
	.wrap:lang(th) #box3 .c4 {
	    bottom: 14.8%;
	}
	#box2 .bottom p.h14 {
	    height: 210px;
	}
	#box7 ul li {
	    width: 41%;
	}

}
@media only screen and (max-width: 360px){
	#box7 ul li p.h16 {
	    font-size: 14px;
	}
	#box7 ul li {
	    width: 42%;
	}
}
@media only screen and (max-width: 300px){
	#box4 .byfabrictype .bcontent .area .bgroup a.h12{
		font-size: 16px;
    	line-height: 26px;
	}
	#box7 .content h5 + p {
	    padding: 0 0 15px;
	}
	#box7 ul li p.h16 {
	    font-size: 12px;
	    line-height: 15px;
	}
	#box8 h5 {
	    font-size: 26px;
	    line-height: 36px;
	}
}