@charset "UTF-8";

#ly-Sections { z-index:2; }

#ly-Popup { position:absolute; z-index:200; }
#ly-Popup div.obj-popup { border:1px solid #fff; background-color:#fff; }
#ly-Popup div.button { display:-ms-flexbox; display:flex; }
#ly-Popup div.button button { width:50%; border:none; padding:5px; color:#fff; }
#ly-Popup div.button button:nth-of-type(1) { background-color:#a22929; }
#ly-Popup div.button button:nth-of-type(2) { background-color:#e53c2e; }

#ly-Visual { width:100%; height:90vh; background-color:whitesmoke; position:relative; z-index:2; }
#ly-Visual div.frame { }

#ly-Products { background-color:white; position:relative; }
#ly-Products div.frame { max-width:1200px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; display:flex; justify-content:space-between; }
#ly-Products div.frame div { width:350px; height:350px; border-radius:10px; box-shadow:0 4px 4px 0 #dadada; }
#ly-Products div.frame div button { width:100%; height:100%; padding:30px; border:none; display:flex; flex-direction:column; align-items:flex-start; background-origin:border-box; background-position:center; background-size:100%; border:none; border-radius:10px; transition:all ease .2s; transition-property:background, box-shadow; }
#ly-Products div.frame div button:focus,
#ly-Products div.frame div button:hover { box-shadow:inset 0 0 10px 10px rgba(0, 0, 0, .1); background-size:110%; }
#ly-Products div.frame div button h2 {}
#ly-Products div.frame div button p { margin-top:10px; }
#ly-Products div.frame div.woodrock button { background-image:url('../../img/view/index/img-product-woodrock.jpg'); }
#ly-Products div.frame div.foamboard button { background-image:url('../../img/view/index/img-product-foamboard.jpg'); }
#ly-Products div.frame div.honeycomb button { background-image:url('../../img/view/index/img-product-honeycomb.jpg'); }

#ly-Lineup { width:100%; padding-top:80px; padding-bottom:80px; background-color:whitesmoke; }
#ly-Lineup div.frame { max-width:1200px; margin:auto; }
#ly-Lineup header h2 { margin-bottom:60px; text-align:center; font-size:2.75rem; font-weight:700; }
#ly-Lineup ul.tab { margin-bottom:40px; list-style:none; display:flex; justify-content:center; gap:40px; }
#ly-Lineup ul.tab li button { padding:18px 30px 18px 70px; border:none; background:none; border:3px solid gainsboro; border-radius:7px; font-size:1.125rem; font-weight:500; color:dimgray; transition:all ease .2s; transition-property:border, color; }
#ly-Lineup ul.tab li button:focus,
#ly-Lineup ul.tab li button:hover { border-color:#e53c2e; color:black; }
#ly-Lineup[data-type='foamboard'] ul.tab li button[data-type='foamboard'],
#ly-Lineup[data-type='honeycomb'] ul.tab li button[data-type='honeycomb'],
#ly-Lineup[data-type='woodrock'] ul.tab li button[data-type='woodrock'] { border-color:#e53c2e; color:white; background-color:#e53c2e; }

#ly-Lineup ul.tab-sub { margin-bottom:50px; list-style:none; display:none; justify-content:center; gap:10px; }
#ly-Lineup[data-type='foamboard'] ul.tab-sub[data-type='foamboard'],
#ly-Lineup[data-type='honeycomb'] ul.tab-sub[data-type='honeycomb'],
#ly-Lineup[data-type='woodrock'] ul.tab-sub[data-type='woodrock'] { display:flex; }
#ly-Lineup ul.tab-sub li button { padding:10px 20px; border:none; background-color:white; border:.1px solid gainsboro; border-radius:99999px; font-size:.875rem; color:dimgray; transition:all ease .2s; transition-property:border, color; }
#ly-Lineup ul.tab-sub li button:focus,
#ly-Lineup ul.tab-sub li button:hover { border-color:dimgray; color:black; }
#ly-Lineup[data-type='foamboard'][data-product='all'] ul.tab-sub[data-type='foamboard'] li button[data-product='all'],
#ly-Lineup[data-type='foamboard'][data-product='fb'] ul.tab-sub[data-type='foamboard'] li button[data-product='fb'],
#ly-Lineup[data-type='foamboard'][data-product='fb-adh'] ul.tab-sub[data-type='foamboard'] li button[data-product='fb-adh'],
#ly-Lineup[data-type='foamboard'][data-product='fb-clr'] ul.tab-sub[data-type='foamboard'] li button[data-product='fb-clr'],
#ly-Lineup[data-type='honeycomb'][data-product='all'] ul.tab-sub[data-type='honeycomb'] li button[data-product='all'],
#ly-Lineup[data-type='honeycomb'][data-product='hcb-k'] ul.tab-sub[data-type='honeycomb'] li button[data-product='hcb-k'],
#ly-Lineup[data-type='honeycomb'][data-product='hcb-b'] ul.tab-sub[data-type='honeycomb'] li button[data-product='hcb-b'],
#ly-Lineup[data-type='honeycomb'][data-product='hcb-w'] ul.tab-sub[data-type='honeycomb'] li button[data-product='hcb-w'],
#ly-Lineup[data-type='woodrock'][data-product='wr'] ul.tab-sub[data-type='woodrock'] li button[data-product='wr'],
#ly-Lineup[data-type='woodrock'][data-product='wr-adh'] ul.tab-sub[data-type='woodrock'] li button[data-product='wr-adh'],
#ly-Lineup[data-type='woodrock'][data-product='wr-clr'] ul.tab-sub[data-type='woodrock'] li button[data-product='wr-clr'],
#ly-Lineup[data-type='woodrock'][data-product='all'] ul.tab-sub[data-type='woodrock'] li button[data-product='all'] { border-color:dimgray; color:white; background-color:dimgray; }

#ly-Lineup div.products { padding:20px; overflow:hidden; }
#ly-Lineup div.products div[data-type] { margin-right:-30px; display:none; flex-wrap:wrap; gap:50px 30px; }
#ly-Lineup[data-type='foamboard'] div.products div[data-type='foamboard'],
#ly-Lineup[data-type='honeycomb'] div.products div[data-type='honeycomb'],
#ly-Lineup[data-type='woodrock'] div.products div[data-type='woodrock'] { display:flex; }
#ly-Lineup div.products div[data-type] div[data-product] { width:calc(20% - 30px); min-width:200px; max-width:300px; display:none; }
#ly-Lineup[data-type='foamboard'][data-product='all'] div.products div[data-type='foamboard'] div[data-product],
#ly-Lineup[data-type='foamboard'][data-product='fb'] div.products div[data-type='foamboard'] div[data-product='fb'],
#ly-Lineup[data-type='foamboard'][data-product='fb-adh'] div.products div[data-type='foamboard'] div[data-product='fb-adh'],
#ly-Lineup[data-type='foamboard'][data-product='fb-clr'] div.products div[data-type='foamboard'] div[data-product='fb-clr'],
#ly-Lineup[data-type='honeycomb'][data-product='all'] div.products div[data-type='honeycomb'] div[data-product],
#ly-Lineup[data-type='honeycomb'][data-product='hcb-k'] div.products div[data-type='honeycomb'] div[data-product='hcb-k'],
#ly-Lineup[data-type='honeycomb'][data-product='hcb-b'] div.products div[data-type='honeycomb'] div[data-product='hcb-b'],
#ly-Lineup[data-type='honeycomb'][data-product='hcb-w'] div.products div[data-type='honeycomb'] div[data-product='hcb-w'],
#ly-Lineup[data-type='woodrock'][data-product='all'] div.products div[data-type='woodrock'] div[data-product],
#ly-Lineup[data-type='woodrock'][data-product='wr'] div.products div[data-type='woodrock'] div[data-product='wr'],
#ly-Lineup[data-type='woodrock'][data-product='wr-adh'] div.products div[data-type='woodrock'] div[data-product='wr-adh'],
#ly-Lineup[data-type='woodrock'][data-product='wr-clr'] div.products div[data-type='woodrock'] div[data-product='wr-clr'] { display:flex; }
#ly-Lineup div.products div[data-type] div button { width:100%; background:none; border:none; transition:all ease .2s; transition-property:background; }
#ly-Lineup div.products div[data-type] div button:before { width:100%; padding-bottom:100%; margin-bottom:15px; content:''; background-color:white; background-size:cover; border:.1px solid gainsboro; border-radius:5px; box-shadow:0 4px 4px 0 #eee; display:block; transition:all ease .2s; transition-property:border; }
#ly-Lineup div.products div[data-type='honeycomb'] div[data-product='hcb-b'] button:before { background-image:url('../../img/view/index/img-product-hcb-bbb.png'); }
#ly-Lineup div.products div[data-type='honeycomb'] div[data-product='hcb-k'] button:before { background-image:url('../../img/view/index/img-product-hcb-kkk.png'); }
#ly-Lineup div.products div[data-type='honeycomb'] div[data-product='hcb-w'] button:before { background-image:url('../../img/view/index/img-product-hcb-www.png'); }
#ly-Lineup div.products div[data-type] div button:focus:before,
#ly-Lineup div.products div[data-type] div button:hover:before { border-color:#e53c2e; }

#ly-Video { width:100%; height:70vh; position:relative; }
#ly-Video div.video { width:100vw; height:100vh; position:fixed; top:0; left:0; z-index:-1; }
#ly-Video div.mask { min-width:100%; min-height:100%; background-image:url('../../img/view/index/img-video-mask.png'); }
#ly-Video div video { min-width:100%; min-height:100%; }

#ly-Contact { position:relative; background-color:#fff; }
#ly-Contact div.frame { max-width:1200px; margin-left:auto; margin-right:auto; padding:80px 20px; display:flex; justify-content:space-between; gap:30px; }
#ly-Contact div.frame div { padding:30px; flex:1; background-color:whitesmoke; border-radius:10px; }



#ly-World { background:url('../../img/view/index/img-bg-export.jpg') center center no-repeat; background-size:cover; background-attachment:fixed; position:relative; z-index:2; }
#ly-World div.frame { padding-left:20px; padding-right:20px; }
#ly-World div.frame dt { margin-bottom:10px; }
#ly-World div.frame dt span { display:block; color:#fff; }
#ly-World div.frame dt span.level-1 { font-weight:900; line-height:1.2; }
#ly-World div.frame dt span.level-2,
#ly-World div.frame dt span.level-3 { font-weight:300; }
#ly-World div.frame dt span.level-3 b { color:#0f0; font-weight:900; }
#ly-World div.frame dd { color:#fff; font-weight:700; }

#ly-Thirty { position:relative; background-color:#fff; }
#ly-Thirty div.background img { width:100%; /* opacity:.6;*/ -ms-filter:grayscale(100); filter:grayscale(100); /*transition:all ease 1s;*/ }
/*#ly-Thirty:hover div.background img { opacity:1; -ms-filter:grayscale(0); filter:grayscale(0); }*/
#ly-Thirty div.frame { width:100%; height:100%; display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; position:absolute; top:0; left:0; padding-left:20px; padding-right:20px; }
#ly-Thirty div.frame dl { background-color:rgba(255, 255, 255, .9); text-align:center; }
#ly-Thirty div.frame dt { font-weight:300; }
#ly-Thirty div.frame dt b { color:#e53c2e; }
#ly-Thirty div.frame dd { margin-top:20px; }
#ly-Thirty div.frame dd a { display:inline-block; border:1px solid #dadada; border-radius:200px; background-color:#fff; font-weight:300; color:#555; text-decoration:none; }
#ly-Thirty div.frame dd a:focus,
#ly-Thirty div.frame dd a:hover { border-color:#757575; background-color:#757575; color:#fff; }

#ly-Lives { position:relative; z-index:2; background-color:#fff; }
#ly-Lives div.frame { padding-left:20px; padding-right:20px; }
#ly-Lives div.lives-picture { margin-bottom:-20px; display:-ms-flexbox; display:flex; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-wrap:wrap; flex-wrap:wrap; }
#ly-Lives div.lives-picture div[data-aos] { margin-bottom:20px; }
#ly-Lives div.lives-picture a { height:100%; padding:5px; display:block; border:1px solid #dadada; }
#ly-Lives div.lives-picture a:focus,
#ly-Lives div.lives-picture a:hover { border-color:#000; }
#ly-Lives div.lives-picture img { width:100%; }
#ly-Lives div.lives-picture a p { transition:transform .50s; }
#ly-Lives div.lives-picture a:focus p,
#ly-Lives div.lives-picture a:hover p { -webkit-transform:scale(1.1); transform:scale(1.1); }

#ly-Footer { position:relative; z-index:2; }

/* Mobile */
@media screen and (min-width:1px) and (max-width:799.99px) {
	#ly-Popup { width:100%; top:80px; text-align:center; display:flex; flex-direction:column; -ms-flex-align:center; align-items:center; }
	#ly-Popup div.obj-popup { margin-top:20px; }
	#ly-Popup div.obj-popup img { max-width:100%; height:auto; }

	#ly-World div.frame { padding-top:60px; padding-bottom:60px; }
	#ly-World div.frame dt span.level-1 { font-size:3em; }
	#ly-World div.frame dt span.level-2,
	#ly-World div.frame dt span.level-3 { font-size:1.4em; }
	#ly-World div.frame dd { margin-top:40px; }

	#ly-Thirty div.frame dl { padding:20px 30px; }
	#ly-Thirty div.frame dd a { padding:10px 30px; font-size:1.2em; }

	#ly-Video video { width:100%; }
	#ly-Video div.mask { position:absolute; top:0; left:0; }

	#ly-Lives div.frame { padding-top:60px; padding-bottom:60px; }
	#ly-Lives div.lives-picture div[data-aos] { width:48%; }
}

/* Mobile & Tablet */
@media screen and (min-width:1px) and (max-width:1019.99px) {
	#ly-Sections { margin-top:80px; }

	#ly-World div.frame dl { text-align:center; }

	#ly-Thirty div.frame dt { font-size:1.5em; }

	#ly-Lives div.frame dt { font-size:2em; }
	#ly-Lives div.frame dd { font-size:1.2em; }
	#ly-Lives div.frame dd.link a { padding:10px 40px; }
}

/* Tablet */
@media screen and (min-width:800px) and (max-width:1019.99px) {
	#ly-World div.frame { padding-top:80px; padding-bottom:80px; }
	#ly-World div.frame dt span.level-1 { font-size:4em; }
	#ly-World div.frame dt span.level-2,
	#ly-World div.frame dt span.level-3 { font-size:1.6em; }
	#ly-World div.frame dd { margin-top:40px; font-size:1.2em; }

	#ly-Lives div.frame { padding-top:80px; padding-bottom:80px; }

	#ly-Thirty div.frame dt { font-size:2.5em; }
}

/* Tablet & Desktop */
@media screen and (min-width:800px) {
	#ly-Popup { top:110px; left:30px; display:-ms-flexbox; display:flex; -ms-flex-align:top; align-items:flex-start; }
	#ly-Popup div.obj-popup:not(:last-of-type) { margin-right:20px; }

	#ly-Thirty div.frame dl { padding:40px 60px; }
	#ly-Thirty div.frame dd a { padding:12px 40px; font-size:1.5em; }

	#ly-Lives div.lives-picture div[data-aos] { width:23%; }
}

@media screen and (min-width:800px) and (-ms-high-contrast:active), screen and (min-width:800px) and (-ms-high-contrast:none) {  
	#ly-Video div.mask { position:absolute !important; }
	#ly-Video div.video { position:absolute !important; }
}

/* Desktop */
@media screen and (min-width:1020px) {
	#ly-Thirty div.frame dt { font-size:3em; }

	#ly-Products div.frame { padding-top:100px; padding-bottom:100px; }

	#ly-World div.frame dt { font-size:2em; }
	#ly-World div.frame dt span.level-1 { font-size:2.7em; }
	#ly-World div.frame dt span.level-2,
	#ly-World div.frame dt span.level-3 { font-size:1.5em; }
	#ly-World div.frame dd { margin-top:70px; font-size:1.6em; }
}

/* Desktop : 1020 */
@media screen and (min-width:1020px) and (max-width:1219.99px) {
	#ly-World div.frame { padding-top:100px; padding-bottom:100px; }

	#ly-Lives div.frame { padding-top:100px; padding-bottom:100px; }
}

/* Desktop : 1220 */
@media screen and (min-width:1220px) {
	#ly-World div.frame { width:1200px; margin:auto; padding-top:120px; padding-bottom:120px; }

	#ly-Lives div.frame { width:1200px; margin:auto; padding-top:120px; padding-bottom:120px; }
}