@charset "utf-8";

/* #about STYLES */

/* *****
----------------------------------------------------------------- */
#about h1.maintitle{
	padding:70px 0 45px;
	border-bottom:none;
}

#about .editableArea{
	margin:0 auto;
	width:990px;
}

/* TABLE STYLES
----------------------------------------------------------------- */

#about table,
#about th,
#about td{
	font-weight:normal;
	border-collapse:collapse;
	border:1px solid #FFF;
}

#about th,
#about td{
	background:#EEE;
}

#about table{
	margin:0;
	width:100%;
}

#about th,
#about td{
	padding:0.3em 0.5em;
	font-size:0.8em;
}

#about table thead th{
	color:#FFF;
	font-weight:bold;
	font-size:0.9em;
	text-align:left;
	background:#6B6B6B;
}

#about table caption{
	caption-side:bottom;
}

#about table caption p{
	font-size:0.65em;
	text-align:left;
}


/* ABOUT
----------------------------------------------------------------- */

#about.about{
	background:#FFF url(../newPattern/2014/img/2014/bgMarble.jpg) no-repeat center 0;
}

#about.about .editableArea{
	padding:120px 0 30px;
	width:100%;
}

#about.about .editableArea article{
	position:relative;
	overflow:hidden;
	margin:0 auto;
	padding:0;
	width:100%;
}

#about.about .editableArea article.feature{
	margin-top:200px;
}


#about.about .editableArea article .inner{
	position:relative;
	margin:0 auto;
	width:990px;
}

#about.about .editableArea article .desc{
	position:absolute;
}

#about.about .editableArea article h2{
	margin-bottom:40px;
}

#about.about .editableArea article p{
	margin-bottom:1.5em;
	font-size:0.95em;
	line-height:180%;
}

article figure{
	line-height:10%;
}

article.feature figure{
	margin-left:-310px;
	float:left;
}

article.concept figure{
	margin-right:-260px;
	float:right;
}

article.design figure{
	margin-left:-100px;
	float:left;
}


article.feature .desc{
	top:205px;
	left:570px;
	width:500px;
}

article.concept .desc{
	top:0;
	left:100px;
	width:480px;
}

article.design .desc{
	top:40px;
	left:530px;
	width:500px;
}



/* NEW PATTERN
----------------------------------------------------------------- */
#about .KV{
	position:relative;
}

#about .KV .subimg{
	position:absolute;
	top:-30px;
	right:-30px;
}

/* NEW PATTERN LEAD */
#about .npLead{
	position:relative;
	margin:30px auto 110px;
	height: 524px;
}

#about .npLead .samplebook-lead{
	position:absolute;
	top: 0;
	right: 0;
}

#about .npLead .samplebook-lead,
#about .npLead .samplebook-lead h2,
#about .npLead .samplebook-lead nav{
	display: inline-grid;
}

#about .npLead img.samplebook{
	position:absolute;
	top:-180px;
	left: 60px;
}

#about .npLead .samplebook-2020{
	position:absolute;
	top: -118px;
	left: 86px;
}

#about .npLead .samplebook-2021{
	position:absolute;
	left: 123px;
}

#about .npLead h2,
#about .npLead p,
#about .npLead nav{
	text-align:justify;
}

#about .npLead h2{
	margin:0 0 0.5em;
	font-size:1.5em;
}

#about .npLead p{
	font-size:1em;
	line-height:1.4;
  width: 515px;
}

#about .npLead nav{
	margin-top:15px;
	line-height:2;
}

#about .newPatterns{
	letter-spacing:-0.4em;
}

#about .newPatterns h2{
	letter-spacing:normal;
	text-align:center;
	margin:80px 0 30px;
}

#about .newPatterns figure{
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:490px;
	letter-spacing:normal;
}

#about .newPatterns figcaption{
	padding:10px 0 0;
	font-size:0.85em;
}

#about .newPatterns figure a{
	  overflow: hidden;
	  display: block;
	  position: relative;
}

#about .newPatterns figure img{
	position: absolute;
	top: 0;
	zoom: 1;
}

#about .newPatterns figure img.opHover:hover{
	opacity:0.7;
}

#about .newPatterns figure.wide{
	width:100%;
}

#about .newPatterns figure.wide a,
#about .newPatterns figure.wide img{
	position:static;
	width:100%;
}

#about .newPatterns p{
	font-size:1em;
	line-height:1.4;
	letter-spacing:normal;
}

#about .archives h2{
	letter-spacing:normal;
	text-align:center;
	margin:130px 0 30px;
}

/* RELATED PRODUCTS
----------------------------------------------------------------- */

#about.related{
}

#about.related h2{
	border-top:5px solid #9A001D;
	padding:1.5em 0;
	font-size:1.2em;
}

#about.related article{
	margin-bottom:35px;
}

#about.related article:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html #about.related article             { zoom: 1; } /* IE6 */
*:first-child+html #about.related article { zoom: 1; } /* IE7 */


#about.related article figure{
	width:300px;
	float:left;
}

#about.related article .desc{
	width:660px;
	float:right;
}

#about.related article h3 a{
	display:block;
	margin-bottom:10px;
	padding-bottom:10px;
	min-height:60px;
	border-bottom:1px solid #C8C8C8;
	background:url(../../shared/img/icon/icnArrowLgray.png) no-repeat right center;
}

#about.related article h3.others{
	margin-top:-10px;
}

#about.related article h3.others a{
	padding:10px 0 20px;
	font-size:1.3em;
	min-height:25px;
	background:url(../../shared/img/icon/icnArrowLgray.png) no-repeat right 0;
}

#about.related article p.more{
	position:relative;
	margin:1em 0;
	padding-left:2em;
	font-size:1em;
}

#about.related article p.more:before{
	position:absolute;
	left:0;
	content:url(../../shared/img/icon/icnArrowL.png);
}



/* BELBIEN CLEA , LE MARGE
----------------------------------------------------------------- */

#about.clea h1.maintitle,
#about.lemarge h1.maintitle{
	padding:55px 0 20px;
}

#about.ev h1.maintitle{
	padding:50px 0 20px;
}

#about.clea h1.maintitle .info{
	float:right;
	margin:-20px 0 0;
}

#about.clea .KV{
	text-align:center;
	background:url(../img/clea/bgCreaKV.png) no-repeat center 0;
}
#about.ev .KV{
	text-align:center;
}
#about.lemarge .KV{
	text-align:center;
	background:url(../img/lemarge/bgLemargeKV.jpg) no-repeat center 0;
}

#about.lemarge h2{
	margin:2em 0 3em;
	text-align:center;
	font-size:1.5em;
}

#about.clea h3,
#about.lemarge h3,
#about.ev h3{
	font-size:1.6em;
	color:#606060;
}

#about.clea p.lead,
#about.lemarge p.lead,
#about.ev p.lead{
	font-size:0.9em;
	line-height:200%;
}

#about.clea .leadBlock:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html #about.clea .leadBlock             { zoom: 1; }
*:first-child+html #about.clea .leadBlock { zoom: 1; }


#about.clea ul.thumbs,
#about.lemarge ul.thumbs,
#about.ev ul.thumbs{
	padding-top:50px;
	clear:both;
	letter-spacing:-0.4em;
}

#about.clea ul.thumbs li,
#about.lemarge ul.thumbs li,
#about.ev ul.thumbs li{
	position:relative;
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:165px;
	text-align:center;
	letter-spacing:normal;
}

#about.clea ul.thumbs li span.caption,
#about.lemarge ul.thumbs li span.caption,
#about.ev ul.thumbs li span.caption{
	display:block;
}

#about.clea ul.thumbs li span.recommend,
#about.lemarge ul.thumbs li span.recommend,
#about.ev ul.thumbs li span.recommend{
	position:absolute;
	text-align:center;
	top:-15px;
	left:27px;
}

#about.clea p.more,
#about.ev p.more{
	font-size:1.2em;
	text-align:center;
}

#about.clea p.more a,
#about.ev p.more a{
	color:#9A001D;
}


#about.clea article h2{
	margin:60px 0 0;
	border-top:5px solid #9A001D;
	padding:25px 0 25px;
	font-size:1.2em;
}

#about.lemarge article h2,
#about.ev article h2{
	margin:60px 0 0;
	border-top:5px solid #E8E8E8;
	padding:1.2em 0;
	font-size:1.2em;
	text-align:left;
}

#about.clea article h3,
#about.lemarge article h3,
#about.ev article h3{
	margin:0 0 15px;
}


#about.clea article .inner,
#about.ex article .inner,
#about.ev article .inner{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:top;
}

#about.ev article .inner h3{
	margin:30px 0 15px 0;
	font-size:1.4em;
}

#about.clea article ul.links,
#about.ev article ul.links{
	margin:0.5em 0;
	width:300px;
	float:left;
	font-size:1.2em;
}

#about.lemarge article ul.links{
	margin:0.5em 0;
	width:180px;
	float:left;
	font-size:1.2em;
}

#about.cireform article ul.links{
	margin:0.5em 0;
	width:300px;
	float:left;
	font-size:1.2em;
}


#about.clea article ul.links li,
#about.lemarge article ul.links li,
#about.cireform article ul.links li,
#about.ev article ul.links li{
	margin:0.5em 0;
}


#about.clea article ul.links li.title,
#about.lemarge article ul.links li.title,
#about.cireform article ul.links li.title,
#about.ev article ul.links li.title{
	margin:0.8em 0 0;
	padding-bottom:0.5em;
	width:85%;
	font-size:0.9em;
	border-bottom:1px solid #C8C8C8;
}


#about.clea article ul.links a,
#about.lemarge article ul.links a,
#about.cireform article ul.links a,
#about.ev article ul.links a{
	padding-left:1.5em;
}

#about.clea article ul.links a:hover,
#about.lemarge article ul.links a:hover,
#about.cireform article ul.links a:hover,
#about.ev article ul.links a:hover{
	text-decoration:underline;
}

#about.clea article ul.links li.open a,
#about.lemarge article ul.links li.open a,
#about.cireform article ul.links li.open a,
#about.ev article ul.links li.open a{
	background:url(../../shared/img/icon/icnPDFRed.png) no-repeat left;
}

#about.clea article ul.links li.download a,
#about.lemarge article ul.links li.download a,
#about.cireform article ul.links li.download a,
#about.ev article ul.links li.download a{
	background:url(../../shared/img/icon/icnDLRed.png) no-repeat left;
}

#about.clea article ul.links li.claim a,
#about.lemarge article ul.links li.claim a,
#about.cireform article ul.links li.claim a,
#about.ev article ul.links li.claim a{
	background:url(../../shared/img/icon/icnRocketRed.png) no-repeat left;
	background-size: 18px 18px;
}

/* CLEA INFORMATION
----------------------------------------------------------------- */

/*#about .technicalinfo table tbody td,
#about .technicalinfo table tbody th{
	text-align:center;
}*/

#about .cleainfo table tbody th{
	white-space:nowrap;
	text-align:left;
}

#about table ul{
	margin:0;
}

.cleainfo col.number              {width:10%;}
.cleainfo col.name                {width:45%;}
.cleainfo col.width               {width:17%;}
.cleainfo col.length              {width:11%;}
.cleainfo col .thickness           {width:17%}

/* fireProtectionInformation
----------------------------------------------------------------- */
#about .fireProtectionInformation table tbody td,
#about .fireProtectionInformation table tbody th{
	text-align:left;
	background:#EEE;
}

#about .fireProtectionInformation table tbody th{
	white-space:nowrap;
}

.fireProtectionInformation col.fuel        {width:7%;}
.fireProtectionInformation col.carbonate   {width:23%;}
.fireProtectionInformation col.number      {width:9%;}
.fireProtectionInformation col.escription  {width:61%;}

/* CI REFORM
----------------------------------------------------------------- */

#about.cireform{
}

#about.cireform .titleWrapper{
	position:relative;
}

#about.cireform h1.maintitle{
	margin:0;
	padding:0;
	position:absolute;
	top:-8px;
	z-index:1;
	width:100%;
}

#about.cireform h1.maintitle span{
	margin:0 auto;
	display:block;
	width:1000px;
}


#about.cireform .KV{
	margin-top:70px;
	height:510px;
	z-index:2;
	background:url(../img/cireform/bgCIReformKV.png) repeat-x 0 41px;
}

#about.cireform .KV img{
	display:block;
	margin:0 auto;
}

#about.cireform p.lead{
	margin:1em 0 2em;
	font-size:0.9em;
	line-height:200%;
}

#about.cireform article h2{
	margin:60px 0 0;
	border-top:5px solid #73C6C7;
	padding:1.2em 0;
	font-size:1.2em;
	text-align:left;
}

#about.cireform ul.detail{
	margin:0;
	letter-spacing:-0.4em;
}

#about.cireform ul.detail li{
	letter-spacing:normal;
	display:inline-block;
	*diplay:inline;
	*zoom:1;
	width:285px;
	vertical-align:top;
}

#about.cireform ul.detail li.middle{
	margin:0 66px;
}

#about.cireform ul.detail li > p{
	margin:0.8em 0 0;
	font-size:1.1em;
}

#about.cireform ul.detail li > ul li{
	margin:0.8em 0 0;
	font-size:0.95em;
}

#about.cireform ul.detail li figure{
	margin-top:20px;
}

/* EX SHEET
----------------------------------------------------------------- */

#about.ex{
  padding-bottom: 120px;
}

#about.ex .KV {
    text-align: center;
}

#about.ex p{
  color: #FFF;
  font-size: 0.9em;
  line-height: 180%;
}

.ci {
  background: #000;
}

/* NEWPRODUCT
----------------------------------------------------------------- */

.p-newProduct__maintitle{
	text-align: center;
	padding-bottom: 0!important;
}

.p-newProduct__title{
	margin-top: 118px;
	margin-bottom: 32px;
}

.p-newProduct__list{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 72px 14px;
}

.p-newProduct__item{
	width: 240px;
}

.p-newProduct__number,
.p-newProduct__name{
	display: block;
}

.p-newProduct__number{
	font-size: 20px;
	font-weight: bold;
}

.p-metal,
.p-wood{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.p-metal{
	margin-bottom: 72px;
}

.p-metal__img{
	margin-right: 14px;
}

.p-wood__img{
	margin-left: 14px;
}

.p-newPatterns__list{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 48px 0;
}

.p-newPatterns__title{
	font-size: 24px;
}

.p-newPatterns__summary{
	font-size: 14px;
}

/* Pottery
----------------------------------------------------------------- */

#about.pottery .editableArea{
  width: 100%;
}

.potteryDesigner{
  padding: 86px 0 92px;
  background: #000;
}

.potteryPattern{
  width: 1080px;
  margin: 108px auto;
}

.potteryPattern__list{
  display: flex;
  justify-content: space-between;
}

.potteryPattern__transition{
  transition: .3s;
}

.potteryPattern__transition:hover{
  opacity: 0.7;
}