﻿@charset "UTF-8";

* { padding:0; margin:0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; line-height:1.25; }

img { vertical-align:middle; }

#ly-Title { position:relative; margin-top:60px; overflow:hidden; background-color:#fff; }
#ly-Title div.frame { border-bottom:1px solid #dadada; }
#ly-Title dt { font-weight:bold; }
#ly-Title dd { text-align:right; color:#757575; }
#ly-Title dd span { display:block; line-height:1.6; }

#ly-About { background-color:#fff; position:relative; }
#ly-About header h2 { font-weight:normal; }
#ly-About header p { color:#555; }
#ly-About header p span { color:#ff3c00; }
#ly-About p.content { font-weight:300; color:#555; }
#ly-About p.content span { display:block; }
#ly-About p.content span.space { margin-top:15px; }
#ly-About p.content a { color:#080; text-decoration:none; }

#ly-Function { background-color:#fafafa; position:relative; }
#ly-Function header h2 { font-weight:normal; }
#ly-Function div.content dl { text-align:center; background-position:center top; background-repeat:no-repeat; }
#ly-Function div.content dl.popup { background-image:url('../../img/view/about/img-about-popup.png'); }
#ly-Function div.content dl.malware { background-image:url('../../img/view/about/img-about-malware.png'); }
#ly-Function div.content dl.dns { background-image:url('../../img/view/about/img-about-dns.png'); }
#ly-Function div.content dl.browser { background-image:url('../../img/view/about/img-about-browser.png'); }
#ly-Function div.content dl.cache { background-image:url('../../img/view/about/img-about-cache.png'); }
#ly-Function div.content dl.system { background-image:url('../../img/view/about/img-about-system.png'); }
#ly-Function div.content dt { padding-top:185px; }
#ly-Function div.content dd { margin-top:15px; line-height:1.6; font-weight:300; word-break:keep-all; color:#555; }

/* Mobile */
@media screen and (min-width:1px) and (max-width:799.99px) {
	#ly-Title div.frame { padding-top:20px; padding-bottom:20px; }
	#ly-Title dt { font-size:2em; text-align:center; }
	#ly-Title dd { display:none; }

	#ly-About header h2 { font-size:1.8em; margin-bottom:30px; }
	#ly-About header p { margin-bottom:20px; font-size:1.1em; line-height:1.8; }
	#ly-About p.content span { line-height:1.8; }

	#ly-Function header h2 { font-size:1.8em; margin-bottom:30px; }
	#ly-Function div.content dt { font-size:1.4em; }
	#ly-Function div.content dl:not(:last-of-type) { margin-bottom:50px; }
}

/* Mobile & Tablet */
@media screen and (min-width:1px) and (max-width:1219.99px) {
}

/* Tablet */
@media screen and (min-width:800px) and (max-width:1219.99px) {
	#ly-Title div.frame { padding-top:30px; padding-bottom:30px; }

	#ly-Function div.content dl { width:50%; padding-left:40px; padding-right:40px; }
	#ly-Function div.content dl:nth-of-type(1),
	#ly-Function div.content dl:nth-of-type(2),
	#ly-Function div.content dl:nth-of-type(3),
	#ly-Function div.content dl:nth-of-type(4) { margin-bottom:60px; }
}

/* Tablet & Desktop */
@media screen and (min-width:800px) {
	#ly-Title dl { display:-ms-flexbox; display:flex; -ms-flex-pack:justify; justify-content:space-between; }
	#ly-Title dt { font-size:2.2em; }

	#ly-About header h2 { font-size:2em; margin-bottom:40px; }
	#ly-About header p { margin-bottom:30px; display:inline-block; font-size:1.2em; line-height:2; }
	#ly-About p.content span { line-height:2; }

	#ly-Function header h2 { font-size:2em; margin-bottom:40px; }
	#ly-Function div.content { display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-pack:justify; justify-content:space-between; }
	#ly-Function div.content dt { font-size:1.5em; }
}

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

	#ly-About div.frame { width:1200px; margin-left:auto; margin-right:auto; }
	#ly-About header p { border-bottom:1px solid #dadada; }

	#ly-Function div.frame { width:1200px; margin-left:auto; margin-right:auto; }
	#ly-Function div.content dl { width:33.33%; padding-left:40px; padding-right:40px; }
	#ly-Function div.content dl:nth-of-type(1),
	#ly-Function div.content dl:nth-of-type(2),
	#ly-Function div.content dl:nth-of-type(3) { margin-bottom:70px; }
}