.row__no-margin {
	margin-left: 0px !important;
	margin-right: 0px !important;
}

.col__no-padding {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

/*reset bootstrap style*/
.header_wrap *, .footer_wrap * {
	-webkit-box-sizing: initial; 
    -moz-box-sizing: initial;
    box-sizing: initial;
}

/*reset bootstrap style*/
.header_wrap input, button, select, textarea, .footer_wrap input, button, select, textarea {
    line-height: initial;
}

.system_wrap .row, .class_wrap .row {
	/*margin-bottom: 0px;*/
}

@media (min-width: 769px) {
    .system_wrap div[class^="col"], .class div[class^="col"]{
    	padding-left: 20px; 
    	padding-right: 20px;
    }
}

.system_wrap .container-fluid, .class_wrap .container-fluid {
	max-width: 472px;
}

@media (min-width: 481px) {
	.system_wrap .container-fluid, .class_wrap .container-fluid {
		max-width: 676px;
	}
}

@media (min-width: 769px) {
	.system_wrap .container-fluid, .class_wrap .container-fluid {
		max-width: 960px;
	}
}

@media (min-width: 1280px) {
	.system_wrap .container-fluid, .class_wrap .container-fluid {
		max-width: 1272px;
	}
}

/*--------------------listSystem頁面--------------------*/
/*---------------------------*/
.system__banner {
	display: flex;
    align-items: center;
    justify-content: center;
}

.system__banner > img {
	max-width: 100%;
	max-height: 100%;
}

@media (min-width: 769px) {
	.system__banner {
		height: 350px;
	}
	.system__banner > img {
		max-width: initial;
		max-height: initial;
		height: 100%;
	}
}

@media (min-width: 1280px) {
	.system__banner {
		height: auto;
	}
	.system__banner > img {
		max-width: 100%;
		max-height: 100%;
		height: auto;
	}
}

/*---------------------------*/
.system__title1 {
	padding-top: 40px;
}

@media (min-width: 481px) {
	.system__title1 {
		padding-top: 54px;
	}
}

.system__title1--eng {
	font-family: 'RideLife', Arial, '微軟正黑體', 'STHeiti', sans-serif;
	font-size: 4rem;
	color: #006DC0;
}

.system__title1--chi {
	font-family: '微軟正黑體', 'STHeiti', Arial, sans-serif;
	font-size: 3.5rem;
	color: #006DC0;
}

@media (min-width: 481px) {
	.system__title1--eng {
		font-size: 5rem;
	}
	.system__title1--chi {
		font-size: 4.5rem;
		line-height: 1;
	}
}

@media (min-width: 769px) {
	.system__title1--eng {
		font-size: 7rem;
	}
	.system__title1--chi {
		font-size: 6rem;
		line-height: 1;
	}
}

.system__des {
	padding-top: 30px;
	padding-bottom: 60px;
	font-size: 1.6rem;
	line-height: 30px;
	color: #2E2E2E;
	letter-spacing: 1.2px;
}

@media (min-width: 481px) {
	.system__des {
		padding-top: 34px;
		padding-bottom: 70px;
		font-size: 1.8rem;
		line-height: 34px;
	}
}

@media (min-width: 1280px) {
	.system__des {
		padding-bottom: 110px;
	}
}

/*---------------------------*/
.system__title2 {
	font-family: 'RideLife', Arial, '微軟正黑體', 'STHeiti', sans-serif;
	font-size: 3rem;
	color: #006DC0;
	border-bottom: 2px solid #006DC0;
	padding-bottom: 12px;
	margin-bottom: 25px;
}

@media (min-width: 481px) {
	.system__title2 {
		font-size: 3.5rem;
	}
}

@media (min-width: 769px) {
	.system__title2 {
		font-size: 4.5rem;
	}
}

@media (min-width: 1280px) {
	.system__title2 {
		margin-bottom: 38px;
	}
}

.system__block {
	margin-bottom: 45px;
}

.system__block__item {
	margin-bottom: 25px;
	padding: 9px;
	padding-bottom: 26px;
	border: rgba(0, 0, 0, 0) 1px solid;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0);
}

.system__block__item:hover {
	border: #ececec 1px solid;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

@media (min-width: 481px) {
	.system__block {
		margin-bottom: 32px;
	}
	.system__block__item {
		margin-bottom: 38px;
	}
}

@media (min-width: 769px) {
	.system__block {
		margin-bottom: 62px;
	}
}

@media (min-width: 1280px) {
	.system__block {
		margin-bottom: 55px;
	}
	.system__block__item {
		margin-bottom: 45px;
		padding: 12px;
		padding-bottom: 26px;
	}
}

.system__block__item__img {
	width: 100%;
}

.system__block__item__title {
	padding-top: 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid #006DC0;
	font-family: 'RideLife', Arial, '微軟正黑體', 'STHeiti', sans-serif;
	font-size: 1.7rem;
	color: #006DC0;
}

@media (min-width: 1280px) {
	.system__block__item__title {
		font-size: 2rem;
	}
}

.system__block__item__price {
	padding-top: 12px;
	font-size: 1.4rem;
}

.system__block__item__price__num {
	font-size: 1.6rem;
	font-weight: bold;
	padding-left: 15px;
}

.system__block__item__color {
	padding-top: 23px;
	text-align: center;
}

.system__block__item__color .color_region{
	margin: 0 0 10px 0;
}

.system__block__item__color .color_region li {
	width: 17px;
	height: 17px;
	margin: 0 3px;
	box-sizing: initial;
	-webkit-box-sizing: initial;
	-moz-box-sizing: initial;
}

.system__block__item__btn {
	margin: 0 auto;
	margin-top: 17px;
	width: 100px;
	height: 30px;
	background-color: #A0A1A2;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	cursor: pointer;
}

.system__block__item__btn:hover{
	background-color: #006DC0;
}

.system__block__item__btn__plus {
	background: url(../images/list_system/item_btn_plus.png) no-repeat;
	width: 27px;
    height: 27px;
    vertical-align: middle;
}

/*--------------------listClass頁面--------------------*/
/*---------------------------*/
.class__title {
	color: #000000;
	font-size: 3rem;
	padding-top: 46px;
	line-height: 3rem;
}

.class__des {
	color: #000002;
	font-size: 1.8rem;
	line-height: 1.4;
	padding-top: 20px;
	padding-bottom: 46px;
	letter-spacing: 1.2px;
}

@media (min-width: 769px) {
	.class__title {
		font-size: 4rem;
		padding-top: 56px;
	}
	.class__des {
		font-size: 2rem;
		padding-top: 34px;
		padding-bottom: 56px;
	}
}

/*---------------------------*/
.class__brand__wra {
	max-width: 472px;
	margin: auto;
	padding: 0 20px;
}

@media (min-width: 481px) {
	.class__brand__wra {
		max-width: 676px;
	}
}

@media (min-width: 769px) {
	.class__brand__wra {
		max-width: 960px;
		max-width: none;
    	padding: 0px;
	}
	.class__brand__wra:after {
		content: '';
		clear: both;
		display: block;
	}
}

.class__brand__wra-underline {
	display: none;
	width: 100%;
	height: 10px;
	float: left;
	top:0;
}

@media (min-width: 769px) {
	.class__brand__wra-underline {
		display: block;
	}
}

.class__brand {
	margin-bottom: 17px;
}


.class__brand__btn {
	height: 80px;
	width: 100%;
	cursor: pointer;
    position: relative;
	display: flex;
    align-items: center;
    opacity:0.8;
}

@media (min-width: 769px) {
	.class__brand__btn {
		justify-content: center;
		-webkit-filter:grayscale(1);
		+filter: grayscale(100%);
	}
}

.class__brand__btn:hover, .class__brand__btn--open{
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out; /* Safari 3.1 to 6.0 */
    transition: opacity 0.5s ease-in-out;
    -webkit-filter:grayscale(0);
    +filter: grayscale(0%);

}

.class__brand__btn__logo {
	padding-left: 25px;
	user-select: none;
}

.class__brand__btn__plus {
	position: absolute;
	right: 25px;
	width: 20px;
	height: 20px;
	top:30px;
	background: url(../images/list_class/icon_menu_brand.png) no-repeat;
	background-position: 0 0;
}

@media (min-width: 769px) {
	.class__brand__btn__logo {
		padding: 0px;
	}
	.class__brand__btn__plus {
		display: none;
	}
}

.class__brand__btn__plus--open {
	background: url(../images/list_class/icon_menu_brand.png) no-repeat;
	background-position: -20px 0;
}

.class__brand__inner {
	padding-top: 30px;
	padding-bottom: 23px;
	color: #000002;
	display: none;
}

.class__brand__inner--open {
	padding-top: 30px;
	padding-bottom: 23px;
	color: #000002;
	display: block;
}

@media (min-width: 769px) {
	.class__brand__block {
		width: 100vw;
	}
	.class__brand__inner {
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 49px;
		padding-bottom: 0px;
	}
	.class__brand__inner--open {
		display: flex;
	}
	.class__brand__inner__item {
		flex: 1;
		margin-right: 49px;
	}
}

@media (min-width: 1280px) {
	.class__brand__inner {
		max-width: 1272px;
		padding-left: 105px;
		padding-right: 105px;
		padding-top: 60px;
	}
	.class__brand__inner__item {
		margin-right: 59px;
	}
}

.class__list__image {
	display: none;
	width: 100%;
    height: 96px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #aaa;
}

@media (min-width: 769px) {
	.class__list__image {
		display: block;
	}
}

@media (min-width: 1280px) {
	.class__list__image {
		height: 109px;
	}
}

.class__list__btn {
	padding: 22px 31px;
	border-top: 1px solid #c4c4c4;
	border-bottom: 0px solid #c4c4c4;
	display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.class__list__btn--open, .class__brand__inner__item--last {
	border-bottom: 1px solid #c4c4c4;
}

@media (min-width: 769px) {
	.class__list__btn, .class__list__btn--open, .class__brand__inner__item--last {
		border: 0px;
		


	}
	.class__list__btn {
		border-bottom: 1px solid #c4c4c4;
		padding: 0px;
		padding-top: 20px;
		padding-bottom: 18px;
	}
	.class__brand__inner__item--last {
		margin-right: 0px;
	}
}

@media (min-width: 1280px) {
	.class__list__btn {
		padding-top: 25px;
		padding-bottom: 18px;
	}
}

.class__list__btn__text {
	font-size: 2.4rem;
	font-family:'微軟正黑體',Arial;
}

.class__list__btn__text span {
	font-family: 'RideLife', Arial, '微軟正黑體', 'STHeiti', sans-serif;	
}

@media (min-width: 769px) {
	.class__list__btn__text {
		font-size: 2rem;
	}
	.class__list__btn__text span {
		display: block;
		padding-top: 8px;
	}
}

.class__list__btn__plus {
	width: 20px;
	height: 20px;
	background: url(../images/list_class/icon_menu_list.png) no-repeat;
	background-position: 0 0;
}


@media (min-width: 769px) {
	.class__list__btn__plus {
		display: none;
	}
}

.class__list__btn__plus--open {
	background: url(../images/list_class/icon_menu_list.png) no-repeat;
	background-position: -20px 0;
}

.class__list__content {
	padding: 0 31px;
	padding-top: 5px;
	padding-bottom: 20px;
	display: none;
}

@media (min-width: 769px) {
	.class__list__content {
		display: block;
		padding: 0px;
		padding-top: 2px;
	}
}

@media (min-width: 1280px) {
	.class__list__content {
		padding-top: 7px;
	}
}

.class__list__content a, .class__list__content a:hover, .class__list__content a:visited{
	color: #000002;
	text-decoration: none;
}

.class__list__content a:hover {
	color: #006dc0;
}

.class__list__content li {
	font-size: 2.4rem;
	line-height: 65px;
}

@media (min-width: 769px) {
	.class__list__content li {
		font-size: 1.7rem;
		line-height: initial;
		padding-top: 23px;
	}
}

/*---------------------------*/
.class__hint {
	background-color: #eef5fb;
	margin-top: 63px;
}

@media (min-width: 481px) {
	.class__hint {
		height: 104px;
	}
	.class__hint .container-fluid {
		height: 100%;
	}
	.class__hint .container-fluid .row {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.class__hint .container-fluid .row .class__hint__img {
		height: 100%;
	}
}

@media (min-width: 769px) {
	.class__hint {
		height: 120px;
		margin-top: 100px;
	}
}

.class__hint__img {
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 30px;
}

.class__hint__img img {
	width: 100%;
}

@media (min-width: 481px) {
	.class__hint__img {
		margin-top: 0px;
		padding-right: 12px;
		display: flex;
		align-items: flex-end;
	}
}

@media (min-width: 769px) {
	.class__hint__img {
		padding-right: 20px;
	}
}

.class__hint__text {
	text-align: center;
	font-size: 1.8rem;
	line-height: 25px;
	color: #6681A4;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 30px;
	margin-bottom: 40px;
}

.class__hint__text span {
	color: #000002;
}

@media (min-width: 481px) {
	.class__hint__text {
		text-align: left;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-left: 12px;
	}
}

@media (min-width: 769px) {
	.class__hint__text {
		font-size: 2rem;
		line-height: 25px;
		padding-left: 20px;
	}
}
.col-xs-6 {
	width: 50%;
    height: 375px;
}

/*
 Yotube css RWD
 <div class="video-container"><iframe.......></iframe></div>
*/
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}