@charset "UTF-8"; #ly-Title.title-about { background-image:url('../../img/common/img-title-about.jpg'); } #ly-Title.title-foamboard { background-image:url('../../img/common/img-title-foamboard.jpg'); } #ly-About div.frame { padding-left:20px; padding-right:20px; } #ly-About div.image img { max-width:100%; } #ly-About div.descript p:not(:first-of-type) { margin-top:15px; } #ly-Pop-Board { background:url('../../img/view/about/img-popboard-background.jpg') center center no-repeat; background-attachment:fixed; background-size:cover; } #ly-Pop-Board div.frame { padding-left:20px; padding-right:20px; } #ly-Pop-Board div.frame header h1 { color:#e53c2e; } #ly-Pop-Board div.frame header p { margin-top:4px; } #ly-Pop-Board div.content div.item { text-align:center; font-size:.95em; line-height:1.6; } #ly-Pop-Board div.content div.image { width:150px; height:150px; opacity:.6; margin:0 auto 20px auto; display:block; background-repeat:no-repeat; background-size:cover; } #ly-Pop-Board div.content div.image.foamboard { background-image:url('../../img/view/about/img-popboard-foamboard.png'); } #ly-Pop-Board div.content div.image.transport { background-image:url('../../img/view/about/img-popboard-transport.png'); } #ly-Pop-Board div.content div.image.network { background-image:url('../../img/view/about/img-popboard-network.png'); } #ly-Pop-Board div.content div.image.partner { background-image:url('../../img/view/about/img-popboard-partner.png'); } #ly-Ci div.frame { padding-left:20px; padding-right:20px; } #ly-History { background-color:#f5f5f5; } #ly-History div.frame { padding-left:20px; padding-right:20px; } #ly-History div.content dl.title { text-align:center; } #ly-History div.content dl.title dt { font-weight:700; color:#e53c2e; } #ly-History div.content dl.title dd { color:#666; } #ly-History div.content div.item-title { position:relative; } #ly-History div.content div.item { position:relative; } #ly-History div.content div.item dt { font-weight:700; } #ly-History div.content div.item dd { color:#333; } #ly-History div.history div.item div.image { margin-top:20px; } #ly-History div.history div.item div.image img { max-width:100%; border:1px solid #dadada; } #ly-Organization div.frame { padding-left:20px; padding-right:20px; } #ly-Organization ul.organization li { margin-top:0 !important; } #ly-Organization ul.organization p { display:block; text-align:center; } #ly-Organization ul.organization p b { display:block; } #ly-Organization ul.organization p.level-1 b { background-color:#55b; color:#fff; padding-top:17px; padding-bottom:17px; } #ly-Organization ul.organization p.level-2 b { background-color:#5b5; color:#fff; padding-top:17px; padding-bottom:17px; } #ly-Organization ul.organization p.level-3 + ul { border-left:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; margin:auto; padding:20px; } #ly-Organization ul.organization p.level-3 + ul li:not(:first-of-type) { margin-top:4px !important; } #ly-Location { background:url('../../img/view/about/img-location-background.jpg') center center no-repeat; background-size:cover; } #ly-Location div.frame { padding-left:20px; padding-right:20px; } #ly-Location div.frame header h1 { color:#fff; } #ly-Location div.content iframe { width:100%; border:5px solid #fff; } #ly-Location div.content p { background-color:#fff; padding:10px; border-radius:2px; font-size:.7em; color:#555; box-shadow:rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;} #ly-Features { background-color:#f5f5f5; } #ly-Features div.frame { padding-left:20px; padding-right:20px; } #ly-Features div.content div.item { text-align:center; font-size:.95em; line-height:1.6; } #ly-Features div.content div.image { width:180px; height:180px; margin:0 auto 20px auto; display:block; background-repeat:no-repeat; background-size:cover; } #ly-Features div.content div.image.application { background-image:url('../../img/view/foamboard/img-features-application.png'); } #ly-Features div.content div.image.light { background-image:url('../../img/view/foamboard/img-features-light.png'); } #ly-Features div.content div.image.shock { background-image:url('../../img/view/foamboard/img-features-shock.png'); } #ly-Features div.content div.image.cut { background-image:url('../../img/view/foamboard/img-features-cut.png'); } #ly-Features div.content div.image.print { background-image:url('../../img/view/foamboard/img-features-print.png'); } #ly-Features div.content div.image.adhesive { background-image:url('../../img/view/foamboard/img-features-adhesive.png'); } #ly-Features div.content div.item:nth-of-type(odd) { background-color:#fff; } #ly-Features div.content div.item:nth-of-type(even) { background-color:#fafafa; } #ly-Where div.frame { padding-left:20px; padding-right:20px; } #ly-Where div.content div.item { background-color:#f5f5f5; } #ly-Where div.content div.item dl { padding:20px; } #ly-Where div.content div.item dt { font-weight:700; font-size:1.1em; color:#822; line-height:1.4; } #ly-Where div.content div.item dd { margin-top:20px; font-size:.95em; } #ly-Where div.content div.image img { max-width:100%; } #ly-We { background-color:#804040; } #ly-We div.frame-custom { padding-left:20px; padding-right:20px; } #ly-We div.frame-custom header h1 { font-weight:900; color:#fff; } #ly-We div.frame-custom header p a { display:inline-block; padding:14px 40px; border:2px solid #fff; border-radius:200px; background-color:#804040; font-weight:700; color:#fff; text-decoration:none; } #ly-We div.frame-custom header p a:focus, #ly-We div.frame-custom header p a:hover { background-color:#fff; color:#804040; } /* Mobile */ @media screen and (min-width:1px) and (max-width:799.99px) { #ly-About div.frame { padding-top:30px; padding-bottom:30px; } #ly-Pop-Board div.frame { padding-top:30px; padding-bottom:30px; } #ly-Pop-Board div.content { padding-top:20px; } #ly-Pop-Board div.content div.item:not(:first-of-type) { margin-top:30px; } #ly-Ci div.frame { padding-top:30px; padding-bottom:30px; } #ly-History div.frame { padding-top:30px; padding-bottom:30px; } #ly-History div.content dl:not(:first-of-type) { margin-top:30px; } #ly-History div.content dt { font-size:1.4em; } #ly-History div.history div.item { margin-top:50px; } #ly-History div.history div.item dd { margin-top:10px; } #ly-History div.history div.item div.image img:not(:first-of-type) { margin-top:20px; } #ly-Organization div.frame { padding-top:30px; padding-bottom:30px; } #ly-Location div.frame { padding-top:30px; padding-bottom:30px; } #ly-Location div.content iframe { height:300px; } #ly-Location div.content p { margin-top:20px; } #ly-Features div.frame { padding-top:30px; padding-bottom:30px; } #ly-Where div.frame { padding-top:30px; padding-bottom:30px; } #ly-We div.frame-custom { padding-top:30px; padding-bottom:30px; } #ly-We div.frame-custom header p a { font-size:1.3em; } } /* Mobile & Tablet */ @media screen and (min-width:1px) and (max-width:1019.99px) { #ly-About div.content div.image { text-align:center; margin-bottom:30px; } #ly-Organization ul.organization p.level-1 { padding-bottom:20px; background:url('../../img/view/about/img-org-center.png') bottom center no-repeat; } #ly-Organization ul.organization p.level-2 { padding-bottom:20px; background:url('../../img/view/about/img-org-center.png') bottom center no-repeat; } #ly-Organization ul.organization p.level-2-1 b { background-color:#757575; color:#fff; padding-top:17px; padding-bottom:17px; } #ly-Organization ul.organization p.level-3 { padding-top:20px; background:url('../../img/view/about/img-org-center.png') top center no-repeat; } #ly-Organization ul.organization p.level-3 b { background-color:#fafafa; font-size:1.1em; border:1px solid #ccc; margin:auto; padding-top:17px; padding-bottom:17px; } #ly-Features div.content div.item { padding:30px 20px; } #ly-Where div.content { margin-bottom:-20px; } #ly-Where div.content div.item { margin-bottom:20px; } #ly-We div.frame-custom header { text-align:center; } #ly-We div.frame-custom header p { margin-top:30px; } } /* Tablet */ @media screen and (min-width:800px) and (max-width:1019.99px) { #ly-About div.frame { padding-top:40px; padding-bottom:40px; } #ly-Pop-Board div.frame { padding-top:40px; padding-bottom:40px; } #ly-Ci div.frame { padding-top:40px; padding-bottom:40px; } #ly-History div.frame { padding-top:40px; padding-bottom:40px; } #ly-Organization div.frame { padding-top:40px; padding-bottom:40px; } #ly-Location div.frame { padding-top:40px; padding-bottom:40px; } #ly-Features div.frame { padding-top:40px; padding-bottom:40px; } #ly-Features div.content div.image { width:180px; height:180px; } #ly-Where div.frame { padding-top:40px; padding-bottom:40px; } #ly-We div.frame-custom { padding-top:40px; padding-bottom:40px; } } /* Tablet & Desktop */ @media screen and (min-width:800px) { #ly-Pop-Board div.content { padding-top:30px; display:-ms-flexbox; display:flex; -ms-flex-pack:justify; justify-content:space-between; } #ly-Pop-Board div.content div.item { width:23%; } #ly-History div.content dl.title { text-align:center; margin-bottom:20px; } #ly-History div.content dl.title dt { font-size:2em; } #ly-History div.content dl.title dd { font-size:1.2em; margin-top:8px; } #ly-History div.history { background:url('../../img/view/about/img-history-line.png') center center repeat-y; } #ly-History div.history div.item-title { height:25px; margin-right:50%; padding-right:30px; } #ly-History div.history div.item-title div.flag { width:25px; height:25px; display:block; position:absolute; top:0; right:-12.5px; background-color:#3ce52e; } #ly-History div.history div.item { margin-top:70px; } #ly-History div.history div.item:nth-of-type(odd) { margin-right:50%; padding-right:30px; } #ly-History div.history div.item:nth-of-type(even) { margin-left:50%; padding-left:30px; } #ly-History div.history div.item dl { width:100%; } #ly-History div.history div.item:nth-of-type(odd) dl { text-align:right; } #ly-History div.history div.item:nth-of-type(odd) div.image { margin-left:auto; } #ly-History div.history div.item dt { font-size:1.6em; } #ly-History div.history div.item dd { margin-top:15px; } #ly-History div.history div.item div.flag { width:25px; height:25px; display:block; position:absolute; top:3px; background-color:#e53c2e; } #ly-History div.history div.item:nth-of-type(odd) div.flag { right:-12.5px; } #ly-History div.history div.item:nth-of-type(even) div.flag { left:-12.5px; } #ly-History div.history div.item div.image { display:-ms-flexbox; display:flex; -ms-flex:wrap:wrap; flex-wrap:wrap; } #ly-History div.history div.item div.image img { width:250px; } #ly-History div.history div.item:nth-of-type(odd) div.image { margin-left:-20px; -ms-flex-pack:end; justify-content:flex-end; } #ly-History div.history div.item:nth-of-type(odd) div.image img { margin-left:20px; } #ly-History div.history div.item:nth-of-type(even) div.image { margin-right:-20px; ms-flex-pack:start; justify-content:flex-start; } #ly-History div.history div.item:nth-of-type(even) div.image img { margin-right:20px; } #ly-Location div.content { position:relative; } #ly-Location div.content iframe { height:400px; } #ly-Location div.content p { position:absolute; top:16px; right:16px; } #ly-Features div.content { display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-pack:justify; justify-content:space-between; } #ly-Features div.content div.item { width:33.33%; display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; -ms-flex-pack:justify; justify-content:space-between; } #ly-Where div.content { display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-pack:justify; justify-content:space-between; } #ly-Where div.content div.item { width:49%; } #ly-Where div.content div.item div.image { -ms-filter:grayscale(100); filter:grayscale(100); transition:filter ease 1s; } #ly-Where div.content div.item:hover div.image { -ms-filter:grayscale(0); filter:grayscale(0); } #ly-We div.frame-custom header p a { font-size:1.5em; } } /* Desktop */ @media screen and (min-width:1020px) { #ly-About div.content { clear:right; } #ly-About div.image { float:right; padding-left:50px; } #ly-Organization ul.organization { position:relative; } #ly-Organization ul.organization *.float { float:left; } #ly-Organization ul.organization *.flex { clear:left; } #ly-Organization ul.organization ul.float { padding-left:40px; background:url('../../img/view/about/img-org-middle.png') center left no-repeat; } #ly-Organization ul.organization ul.flex { display:-ms-flexbox; display:flex; } #ly-Organization ul.organization ul.flex > li { width:25%; padding-top:40px; background-position:top center; background-repeat:no-repeat; } #ly-Organization ul.organization ul.flex > li:nth-of-type(1) { background-image:url('../../img/view/about/img-org-left.png'); } #ly-Organization ul.organization ul.flex > li:nth-of-type(2) { background-image:url('../../img/view/about/img-org-both.png'); } #ly-Organization ul.organization ul.flex > li:nth-of-type(3) { background-image:url('../../img/view/about/img-org-both.png'); } #ly-Organization ul.organization ul.flex > li:nth-of-type(4) { background-image:url('../../img/view/about/img-org-right.png'); } #ly-Organization ul.organization p.level-1 { margin-left:calc(50% - 120px); padding-bottom:40px; background:url('../../img/view/about/img-org-center.png') bottom center no-repeat; } #ly-Organization ul.organization p.level-2 { margin-left:calc(50% - 120px); padding-bottom:40px; background:url('../../img/view/about/img-org-center.png') bottom center no-repeat; } #ly-Organization ul.organization p.level-2-1 { background-color:#757575; color:#fff; padding-top:17px; padding-bottom:17px; } #ly-Organization ul.organization p.level-3 { width:90%; background-color:#fafafa; font-size:1.1em; border:1px solid #ccc; margin:auto; padding-top:17px; padding-bottom:17px; } #ly-Organization ul.organization p.level-3 + ul { width:90%; } #ly-Features div.content div.item { padding:40px 30px; } #ly-Where div.content { margin-bottom:-30px; } #ly-Where div.content div.item { margin-bottom:30px; } #ly-We div.frame-custom header { display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:justify; justify-content:space-between; } } /* Desktop : 1020 */ @media screen and (min-width:1020px) and (max-width:1219.99px) { #ly-About div.frame { padding-top:50px; padding-bottom:50px; } #ly-Pop-Board div.frame { padding-top:50px; padding-bottom:50px; } #ly-Ci div.frame { padding-top:50px; padding-bottom:50px; } #ly-History div.frame { padding-top:50px; padding-bottom:50px; } #ly-Organization div.frame { padding-top:50px; padding-bottom:50px; } #ly-Organization ul.organization p.level-1 { width:240px; font-size:1.3em; } #ly-Organization ul.organization p.level-2 { width:240px; font-size:1.3em; } #ly-Organization ul.organization p.level-2-1 { width:300px; font-size:1.3em; } #ly-Location div.frame { padding-top:50px; padding-bottom:50px; } #ly-Features div.frame { padding-top:50px; padding-bottom:50px; } #ly-Where div.frame { padding-top:50px; padding-bottom:50px; } #ly-We div.frame-custom { padding-top:50px; padding-bottom:50px; } } /* Desktop : 1220 */ @media screen and (min-width:1220px) { #ly-About div.frame { width:1200px; margin-left:auto; margin-right:auto; padding-top:80px; padding-bottom:80px; } #ly-Pop-Board div.frame { width:1200px; margin-left:auto; margin-right:auto; padding-top:80px; padding-bottom:80px; } #ly-Ci div.frame { width:1200px; margin-left:auto; margin-right:auto; padding-top:80px; padding-bottom:80px; } #ly-History div.frame { width:1200px; margin-left:auto; margin-right:auto; padding-top:80px; padding-bottom:80px; } #ly-Organization div.frame { width:1200px; margin-left:auto; margin-right:auto; padding-top:80px; padding-bottom:80px; } #ly-Organization ul.organization p.level-1 { width:280px; font-size:1.45em; } #ly-Organization ul.organization p.level-2 { width:280px; font-size:1.45em; } #ly-Organization ul.organization p.level-2-1 { width:340px; font-size:1.45em; } #ly-Location div.frame { width:1200px; margin-left:auto; margin-right:auto; padding-top:80px; padding-bottom:80px; } #ly-Features div.frame { width:1200px; margin-left:auto; margin-right:auto; padding-top:80px; padding-bottom:80px; } #ly-Where div.frame { width:1200px; margin-left:auto; margin-right:auto; padding-top:80px; padding-bottom:80px; } #ly-We div.frame-custom { width:1200px; margin-left:auto; margin-right:auto; padding-top:80px; padding-bottom:80px; } }