@charset "UTF-8";

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

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

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

.linkbtn {}
.linkbtn a { display: inline-block; text-decoration: none; color: #FFF; opacity:1; border-radius: 8px; background: #2b4b7f; transform: .3s; font-size: 15px; padding: 4px 40px 4px 20px; margin-left: 10px;}
.linkbtn a:hover { opacity:.6;}
.linkbtn a::after { content:"▶"; float: right; margin-right: -30px;}

@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; padding: 10px 0;}
	.intro2 { width: 100%; text-align: center; padding: 10px 0;}
}

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

@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 */
}