@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-Products { position:relative; z-index:2; }
#ly-Products div.frame { display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; position:relative; overflow:hidden; }
#ly-Products div[tabindex] { color:#fff; position:relative; display:-ms-flexbox; display:flex; -ms-flex-align:bottom; align-items:flex-end; overflow:hidden; }
#ly-Products div[tabindex] div.mask { background-image:url('../../img/common/img-title-pattern.png'); }

#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-Video { position:relative; }
#ly-Video div.mask { min-width:100%; min-height:100%; background-image:url('../../img/view/index/img-video-mask.png'); }
#ly-Video video { vertical-align:top; }

#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-Visual div.content dt img { width:100%; min-width:200px; max-width:500px; }
	#ly-Visual div.content dd.descript span { line-height:1.6; }
    #ly-Visual div.content p { font-size:3em; }

	#ly-Products div[tabindex] { height:200px; }
	#ly-Products div.content dl.detail { display:none; }
	#ly-Products div.title span { display:block; }

	#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-Visual div.content { padding-left:20px; padding-right:20px; }

	#ly-Products div[tabindex] { width:50% !important; position:relative; background-position:left bottom; background-size:cover; cursor:pointer; }
	#ly-Products div[tabindex]:nth-of-type(1) { background-image:url('../../img/view/index/img-products-standard.jpg'); }
	#ly-Products div[tabindex]:nth-of-type(2) { text-align:right; background-image:url('../../img/view/index/img-products-premium.jpg'); }
	#ly-Products div[tabindex]:nth-of-type(3) { text-align:right; background-image:url('../../img/view/index/img-products-graphics.jpg'); }
	#ly-Products div[tabindex]:nth-of-type(4) { text-align:right; background-image:url('../../img/view/index/img-products-natural.jpg'); }
	#ly-Products div.title { width:100%; text-align:center; font-weight:900; padding:15px 20px; background-color:rgba(0, 0, 0, .35); }

	#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-Visual div.content dt img { min-width:600px; max-width:600px; }

	#ly-Products div[tabindex] { height:200px; }
	#ly-Products dl.detail { display:none; }

	#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-Visual div.content p { font-size:5em; }
	#ly-Visual div.content dd.descript span { display:block; line-height:2; }
	#ly-Visual div.content dd.descript { font-size:1.2em; }

	#ly-Video { height:60vh; position:relative; }
	#ly-Video div.mask { position:fixed; top:0; left:0; }
	#ly-Video div.video { width:100vw; height:100vh; position:fixed; top:0; left:0; }
	#ly-Video video { min-width:100%; min-height:100%; }

	#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-Products { height:85vh; background-color:#fff; }
	#ly-Products div.frame { height:100%; display:-ms-flexbox; display:flex; position:relative; }
	#ly-Products div[tabindex] { width:25%; margin-top:80px; background-color:#000; cursor:pointer; }
	#ly-Products div[tabindex] div.mask { width:100%; height:100%; opacity:.5; }
	#ly-Products div[tabindex] div.content { width:70vw; height:100%; margin:auto; position:absolute; top:0; left:0; background-position:left top; background-size:cover; transition:opacity ease .3s; opacity:0; visibility:hidden; }
	#ly-Products div[tabindex] div.content dl.detail { margin:auto; padding:10%; }
	#ly-Products div[tabindex] div.content dt { font-size:4em; font-weight:900; color:#fff; }
	#ly-Products div[tabindex] div.content dd.descript { margin-top:20px; font-size:1.4em; color:#eee; }
	#ly-Products div[tabindex] div.content dd.href { margin-top:40px; }
	#ly-Products div[tabindex].active div.content { opacity:1; visibility:visible; }
	#ly-Products div[tabindex] div.content a { display:inline-block; font-size:1.2em; padding:12px 40px; border:2px solid #fff; background-color:rgba(255, 255, 255, .2); border-radius:200px; font-weight:700; color:#fff; text-decoration:none; }
	#ly-Products div[tabindex] div.content a:focus,
	#ly-Products div[tabindex] div.content a:hover { background-color:#fff; color:#222; }
	#ly-Products div[tabindex] div.background { width:100vw; height:100%; position:absolute; top:0; left:0; background-position:left bottom; background-size:cover; transition:opacity ease .5s; opacity:.5; }
	#ly-Products div[tabindex]:nth-of-type(1) div.background { background-image:url('../../img/view/index/img-products-standard.jpg'); }
	#ly-Products div[tabindex]:nth-of-type(2) div.background { background-image:url('../../img/view/index/img-products-premium.jpg'); }
	#ly-Products div[tabindex]:nth-of-type(3) div.background { background-image:url('../../img/view/index/img-products-graphics.jpg'); }
	#ly-Products div[tabindex]:nth-of-type(4) div.background { background-image:url('../../img/view/index/img-products-natural.jpg'); }
	#ly-Products div[tabindex]:focus div.background,
	#ly-Products div[tabindex]:hover div.background { opacity:.9; }
	#ly-Products div[tabindex] div.title { width:100%; -ms-flex-positive:1; flex:1; transition:background-color ease 1s; font-size:1.5em; font-weight:900; padding:18px 25px; position:relative; bottom:0; white-space:nowrap; }
	#ly-Products div[tabindex]:focus div.title,
	#ly-Products div[tabindex]:hover div.title { background-color:rgba(0, 0, 0, .2); }

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

	#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; }
}