/*	school-index */
	.school-index, .school-view {
		margin-top: 2rem
	}

	.index-wrap {
		width: 100%;
	}
	.index-wrap h3 {
		font-size: 1.25rem;
		font-weight: bold;
		border-radius: 0.5rem
	}
	.index-wrap h3 span {
		font-weight: normal;
		font-size: 1rem;
		margin-left: .5rem
	}
	.index-wrap h3 strong {
		color: var(--red)
	}

	.index-wrap .no-search-result {
		text-align: center;
		padding: 5rem 0
	}
	.index-wrap .no-search-result img {
		margin-bottom: .5rem
	}
	.index-wrap .no-search-result p {
		color: var(--gray-600)
	}

/*	school-search */
	.search-wrap {
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1021;
		background-color: #fff;
		overflow-x: auto;
		padding-bottom: 48px;
	}

	.btn-close {
		line-height: 1;
		border: none;
		padding: 0;
		margin: 0;
		background: transparent;
	}
    .btn-close span {
        display: block;
        padding: 10px 0;
    }
    .btn-close em,
    .btn-close em::after,
    .btn-close em::before {
        display: block;
        position: relative;
        height: 1px;
        width: 18px;
        background-color: #000;
        backface-visibility: hidden
    }

    .btn-close em::before,
    .btn-close em::after {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        transition: transform .2s
    }

    .btn-close em {
        background-color: rgba(33, 37, 41, 0)
    }

    .btn-close em::before {
        transform: rotate(-45deg)
    }

    .btn-close em::after {
        transform: rotate(45deg)
    }

    .search-top {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	padding: .5rem 1rem;
    	height: 58px;
    	border-bottom: solid 1px var(--gray-200);
    	background: #fff
    }
    .search-top h3 {
    	font-size: 1.25rem;
    	font-weight: normal;
    	margin: 0;
    }
    .search-top-right {
    	display: flex;
    	align-items: center;
    }
    .search-top-right .btn {
    	margin-right: .5rem;
    	border-radius: .25rem;
    	font-size: small
    }

    .search-body {
    	padding: 0 1rem;
    }
    .search-body h4 {
    	font-size: 1rem;
    	font-weight: bold;
    	margin-bottom: .5rem
    }
    .search-body .input-group {
    	border: solid 1px var(--gray-400);
    	border-radius: .4rem;
    }
    .search-body .input-group.focused {
    	border-color: #3c3c3c;
    }
    .search-body input[type="text"] {
    	border: none;
    	background: transparent;
    }
    .search-body input[type="text"]:focus {
    	box-shadow: none;
    }
    .search-body .input-group-append .btn {
    	border: none;
    	background: transparent;
    }

    .search-body section {
    	padding: 1rem 0;
    	border-bottom: solid 1px var(--gray-200);
    }

    .filter-header {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	margin-bottom: .5rem
    }
    .filter-header h4 {
    	margin: 0;
    }

    .search-tag-list {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	display: inline-flex;
    	flex-wrap: wrap;
    }
    .search-tag-list li {
    	border: solid 1px var(--gray-300);
    	border-radius: .4rem;
    	margin: 2px;
    	padding: .2rem .5rem;
    	font-size: 11pt;
    	position: relative;
    	color: var(--gray-600);
    }
    .search-tag-list li.checked {
    	background-color: #3c3c3f;
    	color: #fff;
    }
    .search-tag-list li:hover {
    	cursor: pointer;
    	border-color: #3c3c3c;
    }
    .search-tag-list li i {
    	position: absolute;
    	top: 12px;
    	font-size: x-small;
    }
    .search-tag-list li span.count {
    	color: var(--gray-500);
    	margin-left: .2rem;
    }
    .search-tag-list li input[type='checkbox'] {
    	opacity: 0
    }

	.filter-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.filter-list li {
		display: flex;
		align-items: center;
		font-size: 11pt;
		padding-left: 1px;
	}
	.filter-list > li:not(:first-child) {
		padding-top: 1rem
	}
	.filter-list li input[type=checkbox],
	.filter-list li input[type=radio] {
		margin-right: 5px
	}
	.filter-list li .cost-box {
    	border: solid 1px var(--gray-300);
    	border-radius: .4rem;
    	margin-right: .5rem;
    	width: 40%
	}
	.filter-list li .count {
		margin-left: .3rem;
		font-size: small;
		line-height: 1.8;
		color: var(--gray-600)
	}
	.filter-list .fa-caret-down,
	.filter-list .fa-caret-up {
		margin-left: .5rem;
		font-size: small;
	}
	.filter-list li.city {
		display: inline-flex;
    	border: solid 1px var(--gray-300);
    	border-radius: 1.2rem;
    	margin: 2px;
    	padding: .2rem 1rem;
    	position: relative;
    	font-size: 10pt;
	}
	.filter-list li.city:hover {
		border-color: var(--gray-400);
		cursor: pointer;
	}
    .filter-list li.city.checked {
    	border-color: #3c3c3c
    }
	.filter-list li.city input[type=checkbox] {
		position: absolute;
		opacity: 0
	}

	#search-filter-submit {
		position: fixed;
		bottom: 0;
		background-color: #000;
		color: #fff;
		width: 100%;
		height: 48px
	}

	.left-banner {
		display: none;
	}

	@media only screen and (min-width: 992px) {
		.school-index, .school-view {
			display: flex;
		}

		.search-wrap {
			display: block;
			flex: 1 0 250px;
			margin-right: 2rem;
			position: static;
			padding-bottom: 48px;
		}

		.search-top {
			padding: 0;
			height: 56px
		}

	    .search-body {
	    	padding: 0;
	    }

		.filter-list > li:not(:first-child) {
			padding-top: .5rem
		}

		.search-top-right .btn {
			margin-right: 0
		}
		.search-top-right .btn-close {
			display: none;
		}

		#search-filter-submit {
			position: static;
		}

		.left-banner {
			display: block;
		}
	}

/*	school-list */
	.school-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.school-list > li {
		padding: 0;
		margin: 2rem 0;
	}

	.school-list .thumb {
		margin-bottom: .5rem;
	}
	.school-list .thumb img {
		width: 100%;
		object-fit: cover;
		border-radius: 0.5rem;
	}
	.school-list .col-content {
		flex: 1;
	}

	.school-list .introduction {
		color: var(--gray-600);
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
	}
	.school-list .tuition {
		font-weight: bold;
		font-size: large;
		line-height: 1
	}
	.school-list .tuition label {
		color: var(--gray-600);
		display: block;
		font-size: small;
		font-weight: normal;
		margin: 0;
	}

	.school-list .col-content .region {
		font-weight: bold;
	}

	.school-list h4 {
		font-size: 1.2rem
	}
	.school-list h4 a {
		font-weight: normal;
	}
	.school-list h4 a span {
		margin-left: .3rem
	}

	.school-list .tag-list {
		margin-top: 1rem
	}
	.school-list .tag-list .tag {
		color: #000;
		border-color: var(--gray-300);
		padding: .375rem
	}
	.school-list .tag-list .tag:hover {
		color: #fff
	}
	.school-list .tag-list .tag.active {
		color: #fff;
		background-color: var(--gray-800);
		border-color: var(--gray-800);
	}

	#mobile-filter-btn {
		position: fixed;
		width: 220px;
		bottom: 6rem;
		left: 50%;
		margin-left: -110px;
		background-color: #fff;
		border: solid 1px #fff;
		border-radius: 1.2rem;
		box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
		padding: 1rem 1rem;
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#mobile-filter-btn img {
		margin-left: .5rem
	}

	@media only screen and (min-width: 768px) {
		.index-wrap h3 {
			background-color: var(--gray-100);
			padding: 1rem;
		}

		.school-list > li {
			display: flex;
			align-items: center;
		}
		.school-list .thumb {
			margin-right: 1rem;
			margin-bottom: 0
		}
		.school-list .thumb img {
			height: 225px;
			width: 300px;
			object-fit: cover;
		}

		.school-list h4 {
			font-size: 1.4rem
		}

		.school-list .introduction {
	        -webkit-line-clamp: 3;
		}
		.school-list .col-content .region {
		}
	}

	@media only screen and (min-width: 992px) {
		#mobile-filter-btn {
			display: none;
		}
	}

	nav.page-menu {
	    display: flex;
	    justify-content: center;
	    margin: 1rem 0;
	}
	.pagination {
	    font-family: var(--font-monospace);
	    font-size: small;
	}

/*	school-view */
	.school-view {
	}

	.school-view h2 {
		margin-top: .2rem;
	}

	.school-view address {
		color: var(--gray-500);
	}

	.school-view .tag-list {
		margin: 0;
	}

	.school-view summary {
		padding: 1rem;
		border: solid 1px var(--gray-300);
		border-radius: .5rem
	}

	/* carousel */
	#schoolCarousel {
		margin: 1rem 0;
	}
	.school-view .carousel-inner {
		border-radius: 0.5rem;
		position: relative;
	}
	.school-view .carousel-item {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
	}
	.school-view .carousel-item .video-bg {
		background-color: #000
	}
	.school-view .carousel-item .video-bg.vimeo {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
	}
	.school-view .carousel-item,
	.school-view .carousel-item .video-bg,
	.school-view .videos {
		height: 225px
	}
	.carousel-caption p {
		text-shadow: 1px 1px 3px #000000;
	}

	.school-view .carousel-controls {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 55px;
	}
	.school-view .carousel-control-prev,
	.school-view .carousel-control-next {
		display: none;
	}
	.school-view .carousel-control-prev,
	.school-view .carousel-control-next,
	.school-view .carousel-indicators li {
		opacity: 0.9
	}
	.school-view .carousel-indicators li.active {
		opacity: 1;
		background-color: var(--red-light)
	}

	@media only screen and (min-width: 576px) {
		.school-view .carousel-item,
		.school-view .carousel-item .video-bg,
		.school-view .videos {
			height: 286px
		}
	}

	@media only screen and (min-width: 768px) {
		.school-view .carousel-inner {
			border-radius: 1rem
		}
		.school-view .carousel-item,
		.school-view .carousel-item .video-bg,
		.school-view .videos {
			height: 390px
		}

		.school-view .carousel-controls {
			position: static;
			height: 1px;
		}
		.school-view .carousel-control-prev,
		.school-view .carousel-control-next {
			position: absolute;
			display: block;
			top: 50%;
			color: #fff;
			line-height: 1
		}
		.school-view .carousel-control-prev span,
		.school-view .carousel-control-next span {
			background-color: rgba(0,0,0,0.5);
			border-radius: .3rem;
			padding: 0.5rem 0.8rem
		}
		.school-view .carousel-control-prev span:hover,
		.school-view .carousel-control-next span:hover {
			background-color: rgba(0,0,0,0.7);
		}
	}

	@media only screen and (min-width: 992px) {
		.school-view .carousel-item,
		.school-view .carousel-item .video-bg,
		.school-view .videos {
			height: 364px
		}
	}

	@media only screen and (min-width: 1200px) {
		.school-view .carousel-item,
		.school-view .carousel-item .video-bg,
		.school-view .videos {
			height: 465px
		}
	}

	.school-view .view-wrap h3 {
		font-size: 1.5rem;
		margin-top: 2.5rem;
	}
	.school-view .view-wrap h4 {
		font-size: 1.25rem
	}
	.school-view .content {
		padding: 1rem;
		border: solid 1px var(--gray-300);
		border-radius: .5rem
	}

	@media only screen and (min-width: 768px) {
		.school-view summary,
		.school-view .content {
			border-radius: 1rem
		}
	}

	.school-view .content p:last-child,
	.school-view .content ul:last-child,
	.school-view .content ol:last-child {
		margin-bottom: 0
	}
	.school-view .content img {
		max-width: 100%
	}
	.school-view .content a {
		word-break: break-all;
	}

	.school-view .old_course table {
		max-width: 100% !important
	}

	.tuition-tbl {
		border: double 1px var(--gray-500);
		margin-bottom: 0
	}
	.tuition-tbl th {
        background-color: var(--gray-100);
        white-space: nowrap;
        border-width: 1px !important
	}
	.tuition-tbl th,
	.tuition-tbl td {
		padding: .5rem 1rem;
		text-align: center;
		vertical-align: middle;
		border: solid 1px var(--gray-300);
		line-height: 1.5
	}
    .tuition-tbl tr:nth-of-type(even) {
        background-color: rgba(0,0,0,.03);
    }
	.tuition-tbl td.currency {
		/*font-family: var(--font-monospace);*/
		white-space: nowrap;
	}

	@media only screen and (min-width: 992px) {
		.tuition-tbl {
			/*table-layout: fixed;*/
		}
	}

	.fees .money {
		margin: 0 1rem 0 .5rem;
	}

/*	tag */
	.tag {
		border: solid 1px var(--red-dark);
		color: var(--red-dark);
		border-radius: .3rem;
		font-size: small;
		padding: 0 .5rem;
		margin-left: 1px;
	}
	a.tag {
		color: var(--red-dark);
	}
	.tag.active {
		background-color: var(--red-dark);
		color: #fff
	}

/*	foundation-search */
	#foundation-search {
		background-color: var(--gray-100);
		margin: -1rem -1rem 2rem -1rem;
		padding: 2rem 1rem;
	}

	#foundation-search h3 {
		text-align: center;
		font-weight: normal;
	}

    .sub-title {
        text-align: center;
        margin-bottom: 2rem;
        line-height: 1.2;
        color: var(--gray-600)
    }
    /*.sub-title::before {
        content: "";
        display: block;
        width: 20px;
        border-top: 1px solid var(--color-foundation);
        margin: 20px auto;
    }*/

    #foundation-search .wrap {
    	margin-bottom: 2rem
    }
    #foundation-search h6 {
    	font-size: 1rem;
    	font-weight: bold;
    	margin-bottom: 1rem
    }
    #foundation-search .item-wrap {
    	display: flex;
    }
    #foundation-search .item {
    	flex: 0 0 24%;
    	background-color: #fff;
    	border: solid 1px var(--gray-300);
    	border-radius: 0.3rem;
    	padding: .5rem 0;
    	margin-right: 3px;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	text-align: center;
    	font-size: 0.9rem;
    	line-height: 1.4;
    	min-height: 60px
    }
    #foundation-search .item input {
    	display: none;
    }
    #foundation-search .item label {
    	margin: 0 .5rem;
    }
    #foundation-search .item span {
    	display: block;
    	font-size: 0.8rem;
    	color: var(--gray-500)
    }
    #foundation-search .item.selected {
    	border-color: var(--blue);
    	color: var(--blue);
    	box-shadow: 1px 1px 3px rgba(0,0,0,0.3)
    }
    #wished_major_wrap .item-wrap {
    	flex-wrap: wrap;
    }
    #wished_major_wrap .item {
    	flex: 0 0 49%;
    	margin-bottom: 3px;
    }
    #foundation-search-submit {
    	width: 100%;
    	border-radius: 0.3rem;
    	padding: 0.5rem;
    	margin-bottom: 1rem
    }
    #foundation-search .reset {
    	color: var(--gray-500);
    }


	.estimate-btn {
		font-size: medium;
		color: var(--gray-600)
	}

	.bottom-banner {
		margin-top: 2rem
	}
	.bottom-banner a {
		display: flex;
		justify-content: space-between;
		border: solid 1px var(--gray-200);
		border-radius: .5rem;
		line-height: 1.2;
		margin-top: 5px;
		padding: 1rem
	}
	.bottom-banner a:hover {
		border-color: var(--black);
		color: var(--black)
	}

	@media only screen and (min-width: 768px) {
		#foundation-search {
			margin: 0 0 2rem 0;
			padding: 2rem;
			border-radius: 0.5rem
		}

		#foundation-search h3 {
			padding-bottom: 0;
			font-size: 1.45rem
		}

		#foundation-search h3 br,
		.sub-title br,
		#foundation-search .item label br {
			content: ""
		}
		#foundation-search .item {
			padding: 1rem 0;
		}
	    #wished_major_wrap .item {
	    	flex: 0 0 24%;
	    }
	    #foundation-search-submit {
	    	width: auto;
	    	min-width: 250px;
	    	display: block;
	    }

		.bottom-banner {
			display: flex;
		}
		.bottom-banner a {
			flex: 1;
			flex-direction: column-reverse;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 1.5rem;
		}
		.bottom-banner a:not(:first-child) {
			margin-left: 1rem
		}
		.bottom-banner a img {
			margin-bottom: 1rem
		}
	}

    label.recommended {
        display: block;
        text-align: center;
        color: var(--gray-600);
        font-size: x-large;
        margin: 2rem 0;
    }