@charset "UTF-8";

#layout .inner { max-width:1020px;}

.intro { text-align: left; padding:20px 0; max-width: 1020px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
	.intro p { padding: 10px 0; }

.introlist { padding:0 0 0 1em; margin: 0 0 0 1em; list-style: disc; text-align: left;}
	.introlist li {}

.art { text-align: left; padding:20px 0; max-width: 900px; margin: 0 auto;}
	.art h3 {padding:0 0;font-weight: bold;}
	.art p { padding: 10px 0;}

.chulist { padding: 10px 0; margin: 0; list-style: none;}
	.chulist li { padding: 0 0 0 3em; text-indent: -3em;}

.exlist { padding: 10px 0; margin: 0; list-style: none; text-align: center;}
	.exlist li { display: inline-block; padding:30px 20px;}



@media all and (min-width:320px) {
	/* 320px+ settings */
	.art h3 {font-size: 18px;}
	.intro p, .art p, .chulist li, .introlist li {font-size: 16px;}
	.intro1 { width: 100%; text-align: left;}
	.intro2 { width: 100%; text-align: center;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.art h3 {font-size: 20px;}
	.intro1 { width: calc(50% - 20px); }
	.intro2 { width: calc(50% - 20px); }
}

@media all and (min-width:720px) {
	/* 720px+ settings */
	.intro p, .art p, .chulist li, .introlist li {font-size: 18px;}
}


@media all and (min-width:960px) {
	/* 960px+ settings */
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}