@charset "utf-8";

/* CSS Document */
/**Responsive**/

/* md */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* sm */
@media (min-width: 768px) and (max-width: 991px) {
	.head2 {display: none;}
	.title {font-size: 48px;}
	footer {flex-direction: column;}
	footer > .section {width: 100%; margin: 25px 0;}
	footer > .section.left {text-align: center; align-items: center;}
	footer > .section.right {text-align: center;}
}

@media (min-width: 480px) and (max-width: 767px) {
	.head2 {display: none;}
	.title {font-size: 36px;}
	.content {display: flex; justify-content: center; align-items: center; margin: 100px 0; flex-direction: column;}
	.pagetit {width: 90%; position: inherit; font-size: 48px; font-weight: 500; text-shadow: 0 0 5px #000; color: #fff; right: 0; margin-bottom: 25px;}
	.halfbox {width: calc(90% - 60px); padding: 30px;}
	.navi-title {font-size: 20px; top: -20vh;}
	.title.navi {font-size: 20px;}
	.nav-footer {font-size: 15px;}
	footer {flex-direction: column;}
	footer > .section {width: 100%; margin: 25px 0;}
	footer > .section.left {text-align: center; align-items: center;}
	footer > .section.right {text-align: center;}
	.line.active {width: 400px;}
}
/* XS Portrait */
@media (max-width: 479px) {
	.head2 {display: none;}
	.title {font-size: 32px;}
	container1 {height: 50vh; background-attachment: inherit;}
	container2 {height: 50vh; background-attachment: inherit;}
	container3 {height: 50vh; background-attachment: inherit;}
	container4 {height: 50vh; background-attachment: inherit;}
	container1.navi {height: 16.5vh;}
	container2.navi {height: 16.5vh;}
	container3.navi {height: 16.5vh;}
	container4.navi {height: 16.5vh;}
	.content {display: flex; justify-content: center; align-items: center; margin: 100px 0; flex-direction: column;}
	.pagetit {width: 90%; position: inherit; font-size: 32px; font-weight: 500; text-shadow: 0 0 5px #000; color: #fff; right: 0; margin-bottom: 25px;}
	.halfbox {width: calc(90% - 60px); padding: 30px;}
	.navi-title {font-size: 20px; top: -20vh;}
	.title.navi {font-size: 20px;}
	.nav-footer {font-size: 15px;}
	footer {flex-direction: column;}
	footer > .section {width: 100%; margin: 25px 0;}
	footer > .section.left {text-align: center; align-items: center;}
	footer > .section.right {text-align: center;}
	.line.active {width: 50%;}
}