/* Common */
a { transition: all 0.3s; }
.form-control { padding: 5px; }
.section-white { padding: 20px 0; background: #fff; }
.to-top { padding: 10px; background: #222; color: #fff; text-align: center; border-radius: 4px; box-shadow: 0 10px 10px #00000035; }
.to-top .fa { display: block; }
.to-top:hover { background: #cc1a1a; color: #fff; }
.btn-bold { font-weight: bold; }
.btn > .fa { margin-right: 10px; }
.btn-orange { background: linear-gradient( 135deg, #FE5503, #FF8400); color: #fff; }
.btn-orange:hover,
.btn-orange:active,
.btn-orange:focus { background: linear-gradient( 135deg, #FE5503, #FF8400); color: #fff; box-shadow: 0 10px 20px -10px #FE550385; }
.btn-dark { background: linear-gradient( 135deg, #444, #000); color: #fff; }
.btn-dark:hover,
.btn-dark:active,
.btn-dark:focus { color: #fff; box-shadow: 0 10px 20px -10px #44444485; }
.btn-warning { background: #FFEAB0; color: #222; border-color: #00000035; }
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus { background: #222; color: #fff; border-color: #00000065; }
.text-danger { color: #cc1a1a; }

.typ-thr h4 {background: #919015; color:#FFF;padding: 5px; width: auto; display: inline-block; }
.typ-sec { border:2px solid #ddd; border-bottom :0;  }
.typ-sec:last-child { border-bottom :2px solid #ddd; }
.typ-one { border:2px solid #ddd; padding: 0!important; }
.typ-one .col-sm-6:last-child { border-left :2px solid #ddd;  }
.typ-one h3 { color:#e60012; }

/* Header */
header ul.widget,
header ul.widget li { margin: 0; padding: 0; list-style: none; }
header ul.widget { display: flex; border-left: 1px solid #00000010; }
header ul.widget li { border-right: 1px solid #00000010; }
header ul.widget li > a { display: block; padding: 5px 10px; font-size: 14px; line-height: 20px; }
header ul.widget li > a > .fa { display: inline-block; margin-right: 10px; width: 14px; height: 14px; background-color: #444; font-size: 12px; text-align: center; line-height: 14px; color: #fff; border-radius: 2px; transition: all 0.3s; }
header ul.widget li > a:hover > .fa { background-color: #cc1a1a; }
header ul.widget li .fa:before { display: block; width: 14px; height: 14px; transform: scale(0.65); }
@media (max-width: 580px) {
	header { margin-bottom: 10px; }
	header .top-bar > .container { padding-left: 0; padding-right: 0; overflow: hidden; }
	header ul.widget { border-left: 0; }
	header ul.widget.widget-social li > a > span { display: none; }
	header ul.widget.widget-social li:first-child > a > span { display: inline-block; margin-left: 5px; }
	header ul.widget.widget-social li > a > .fa { margin-right: 0; }
	header ul.widget.widget-language > li:last-child { border-right: 0; }
	header ul.widget.widget-language > li:first-child > a > span { display: none; }
}
header ul.widget-language { float: right; }
header ul.widget-language > li > a.active { background: #cc1a1a; color: #fff; }
header .edu-search-mobile { display: none;}
header ul.widget-language > li.edu-search > form { display: flex;}
header ul.widget-language > li.edu-search > form > input { padding: 0 10px; background: #f8f8f8; border: 0; border-left: 1px solid #e5e5e5;}
header ul.widget-language > li.edu-search > form > button { width: 30px; height: 30px; background-color: #000; font-size: 20px; line-height: 20px; color: white; border: 0;}
header ul.widget-language > li.edu-search > form > button:focus { background: #FE5503; }
header ul.widget-language > li.edu-search > form > button > .fa:before { width: unset; height: unset;}

header .header-search { display: flex; padding-top: 5px; }
header .header-search input { flex: 1 1 auto; padding: 10px; height: 40px; background: #f8f8f8; line-height: 20px; border: 1px solid #e5e5e5; border-radius: 4px 0 0 4px; box-shadow: inset 1px 1px 2px #00000015; }
header .header-search button { flex: 0 0 40px; margin: 0; padding: 10px; width: 40px; height: 40px; background: linear-gradient( 135deg, #444, #000); color: #fff; font-size: 20px; line-height: 20px; border: 1px solid #000; border-radius: 0 4px 4px 0; }
@media (max-width: 580px) { 
	.logo > a > img { max-width: 100%; }
	header ul.widget-language > li.edu-search { display: none;}
	header .edu-search-mobile { display: block; margin: 10px 0 0; }
	header .edu-search-mobile > form { display: flex; width: 100%;}
	header .edu-search-mobile > form > input { flex: 1 1 0%; padding: 8px 10px; background: #f8f8f8; border: 1px solid #e5e5e5; border-radius: 4px 0 0 4px; box-shadow: inset 1px 1px 2px #00000015;}
	header .edu-search-mobile > form > button { width: 40px; height: 40px; background-color: #000; font-size: 20px; line-height: 20px; color: white; border: 0; border-radius: 0 4px 4px 0;}
	header .edu-search-mobile > form > button:focus { background: #FE5503; }
	header .edu-search-mobile > form > button > .fa:before { width: unset; height: unset;}
}
header .header-navigation { background-color: #cc1a1a; }
header .header-links { display: flex; justify-content: flex-end; }
header .header-links > a { display: flex; }
header .header-links > .links-course { padding: 0 15px 0 0; background: #FF6229; font-size: 16px; font-weight: 600; color: #fff; line-height: 40px; }
header .header-links > .links-course:before { display: block; content: ""; float: left; margin: 2px 5px 0; width: 36px; height: 36px; background-image: url(../images/icon-nav-1.png); background-position: 0px 36px; }
header .header-links > .links-facebook { background: #324B8D; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.1; }
header .header-links > .links-facebook > .fa { padding: 10px; width: 40px; background-color: #43609A; font-size: 20px; color: #fff; line-height: 20px; text-align: center; }
header .header-links > .links-facebook > span { display: none; padding: 10px 15px 10px 10px; text-align: left; }
header .header-links > .links-facebook > span > small { display: none; font-size: 11px; color: #fff; }
header .header-links > .btn-open { display: none; padding: 10px; line-height: 20px; color: #fff; }
header .header-links > .btn-open > .fa { margin-left: 10px; }
@media (max-width: 768px) {
	header .header-links { position: absolute; right: 0; top: 0; }
	.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: transparent; }
	header .header-links > .links-facebook > span { padding-top: 13px; }
	header .header-links > .btn-open { display: block; }
	.navbar-toggle { padding: 5px 10px; }
    .typ-one .col-sm-6:last-child { border-top :2px solid #ddd;   border-left :0;  }
} 
@media (max-width: 580px) {
	header .header-links { padding-right: 0; }
}

/* Categorr & Banner */
.home-menu-banner .page-inner { display: flex; margin-left: -10px; margin-right: -10px; }
.home-sidebar { flex: 0 0 240px; align-items: flex-start; padding-left: 10px; padding-right: 10px; }
.home-sidebar .side-menu { border: 1px solid #e5e5e5; border-radius: 4px;}
.menu-horizontal > .nav > li { position: relative; }
.menu-horizontal > .nav > li > a { padding: 10px 10px 10px 50px; background-color: #fff; font-size: 16px; font-weight: bold; line-height: 20px; border-bottom: 1px solid #00000010;}
.menu-horizontal > .nav > li.active > a { background-color: #cc1a1a; color: #fff;}
.menu-horizontal > .nav > li.active > a > .menu-icon { background-position: 0 36px;}
.menu-horizontal > .nav > li:first-child > a { border-radius: 3px 3px 0 0; }
.menu-horizontal > .nav > li:last-child > a { border-radius: 0 0 3px 3px; border-bottom: 0; }
.menu-horizontal > .nav > li > a:after { position: absolute; right: 3px; top: 3px; display: block; content: ""; width: 4px; height: 34px; background-color: #00000010; border-right: 2px; }
.menu-horizontal > .nav > li > a:hover { background-color: #888; color: #fff; }
.menu-horizontal > .nav > li.open > a { background-color: #cc1a1a; color: #fff; border-color: #00000010; }
.menu-horizontal > .nav > li > a > .menu-icon { position: absolute; left: 2px; top: 2px; display: block; width: 36px; height: 36px; background-color: #00000010; border-radius: 2px; }
.menu-horizontal > .nav > li.dropdown > .dropdown-menu { float: none; top: 0; padding: 0; min-width: 200px; background-color: #cc1a1a; transform: translateX(218px); border-radius: 0 4px 4px 0; border: 0; }
.menu-horizontal > .nav > li.dropdown > .dropdown-menu > li > a { padding: 10px 20px; color: #fff; }
.menu-horizontal > .nav > li.dropdown > .dropdown-menu > li > a:before { display: inline; content: "-"; margin-right: 10px; }
.menu-horizontal > .nav > li.dropdown > .dropdown-menu > li > a:hover { background-color: #940000; }
.menu-horizontal > .nav > li:first-child:hover > a { background-color: #FF6229; }
.menu-horizontal > .nav > li > a:hover > .menu-icon,
.menu-horizontal > .nav > li.open > a > .menu-icon { background-position: 0 36px; }
.menu-icon-1 { background-image: url(../images/icon-nav-1.png); }
.menu-icon-2 { background-image: url(../images/icon-nav-2.png); }
.menu-icon-3 { background-image: url(../images/icon-nav-3.png); }
.menu-icon-4 { background-image: url(../images/icon-nav-4.png); }
.menu-icon-5 { background-image: url(../images/icon-nav-5.png); }
.menu-icon-6 { background-image: url(../images/icon-nav-6.png); }
.menu-icon-7 { background-image: url(../images/icon-nav-7.png); }
.menu-icon-8 { background-image: url(../images/icon-nav-8.png); }
.menu-icon-9 { background-image: url(../images/icon-nav-9.png); }

.home-banner { flex: 1 1 auto; margin: 0; padding-left: 10px; padding-right: 10px; overflow: hidden; }
.home-banner .banner-inner { background: #fff; border: 1px solid #00000010; border-radius: 4px;}
@media (max-width: 580px) {
	.home-menu-banner .page-inner { flex-wrap: wrap; }
	.home-sidebar, .home-banner { flex: 1 1 100%; }
	.home-sidebar { display: none; margin-bottom: 10px; }
	.menu-horizontal > .nav > li.dropdown > .dropdown-menu { width: 100%; transform: translate(0,40px); }
}

.home-adbox { flex: 0 0 240px; display: flex; flex-wrap: wrap; padding-left: 10px; padding-right: 10px; }
.home-adbox div { height: 175px; }
.home-adbox div:first-child { margin-bottom: 20px; }
.home-adbox div > a { display: block; background-color: #fff; border: 1px solid #00000010; border-radius: 4px; }
.home-adbox div > a > img,
.home-adbox div > img { display: block; border-radius: 3px; }
@media (max-width: 580px) {
	.home-adbox { flex: 1 1 100%; margin-left: 5px; margin-right: 5px; margin-top: 10px; padding: 0; }
	.home-adbox div { flex: 1 1 50%; padding: 0 5px; margin-bottom: 0 !important; height: unset; }
}

/* Service */
.home-service { margin: 20px 0; }
.box-card { background: #fff; border: 1px solid #00000010; border-radius: 4px; cursor: pointer; transition: all 0.15s cubic-bezier(0, 0, 0.2, 1) }

.box-card.animated:hover { transform: translateY(-5px); box-shadow: 0 30px 30px -20px #00000035; }
.box-card .image { position: relative; }
.box-card .image > a { position: relative; display: block; }
.box-card .image > a:after { position: absolute; left: 0; bottom: 0; right: 0; display: block; content: ""; width: 100%; height: 80px; background: linear-gradient(180deg, #ffffff00, #ffffff 80%); opacity: 0; transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);}
.box-card .image > img,
.box-card .image > a > img { width: 100%; border-radius: 3px 3px 0 0; }
.box-card .image > .tags { transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);}
.box-card .caption { position: relative; padding: 10px; transform: translateY(0); overflow: hidden; transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);}
.box-card .caption > h3.c-title { position: relative; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; color: #444; }
.box-card .caption > h3.c-title > a {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.box-card .caption > h3.dash-bottom:after { display: block; content: ""; margin: 10px 0; width: 20px; height: 1px; background: #d6d6d6; }
.box-card .caption > p { margin: 0; font-size: 14px;}
.box-card .caption > p.c-text > a { color: #888;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	min-height: 52px;
}
.box-card .caption > p.c-time { color: #358AD9; font-size: 14px; }
.box-card .caption > p.c-time > .fa { margin-right: 5px; }
.box-card .caption > a.read-more { font-size: 14px; text-align: center; color: #cc1a1a; transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);}
.box-card.animated .caption > a.read-more { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0;}
.box-card.animated:hover .image > a:after { opacity: 1; }
.box-card.animated.animated:hover .image > .tags { bottom: 35px; }
.box-card.animated:hover .caption { overflow: visible; }
.box-card.animated:hover .caption { transform: translateY(-35px); }
.box-card.animated:hover .caption > h3 > a { color: #cc1a1a; }
.box-card.animated:hover .caption > h3.dash-bottom:after { background-color: #cc1a1a; }
.box-card.animated:hover .caption > a.read-more { bottom: -20px; opacity: 1; }
.box-card.animated > .caption > .btn.btn-default { position: absolute; left: 0; right: 0; bottom: 0; background-color: #cc1a1a; color: #fff; font-size: 16px; font-weight: bold; border: 0; border-radius: 0 0 3px 3px; opacity: 0; transition: all 0.15s cubic-bezier(0, 0, 0.2, 1); }
.box-card.animated:hover > .caption > .btn.btn-default { bottom: -35px; opacity: 1; }
@media (max-width: 580px) {
	.home-service { margin: 10px 0; }
	.home-service .col-xs-6:nth-child(odd) { padding-right: 5px; }
	.home-service .col-xs-6:nth-child(even) { padding-left: 5px; }
	.box-card { margin-bottom: 10px; }
	.box-card .caption > h3.c-title { line-height: 1.7; }
}

/* Course */
.box-imgad { margin-bottom: 20px; background: #fff; border: 1px solid #00000010; border-radius: 4px; }
.box-imgad > img,
.box-imgad > a > img { display: block; width: 100%; border-radius: 3px; outline: none; }

.section-title { margin: 20px 0; padding: 0; background: url("../images/title-bg.png") no-repeat center 4px; font-size: 18px; font-weight: bold; color: #444; text-align: center; border-bottom: 0; }
.section-title.dash-center:after { display: block; content: ""; margin: 10px auto; width: 20px; height: 1px; background: #cc1a1a; }

.course-item { margin-bottom: 20px; }
.course-item > .image > .tags { position: absolute; z-index: 3; left: -5px; bottom: 0; padding: 2px 5px; background-color: #67B6E7; font-size: 12px; color: #fff; }
.course-item > .image > .tags:after { position: absolute; left: 0; bottom: -6px; display: block; content: ""; width: 6px; height: 6px; border: 3px solid #3D8AB8; border-left-color: transparent; border-bottom-color: transparent; }
.course-item > .caption > h3.c-title { margin-bottom: 5px;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.course-item > .caption > .btn.btn-default { position: absolute; left: 0; right: 0; bottom: 0; background-color: #cc1a1a; color: #fff; border: 0; border-radius: 0 0 3px 3px; opacity: 0; transition: all 0.15s cubic-bezier(0, 0, 0.2, 1); }
.course-item.animated:hover > .caption > .btn.btn-default { bottom: -35px; opacity: 1; }
@media (max-width: 580px) {
	.box-imgad { margin-bottom: 10px; }
	.home-course { margin: 10px 0; }
	.home-course .col-xs-6:nth-child(odd) { padding-left: 5px; }
	.home-course .col-xs-6:nth-child(even) { padding-right: 5px; }
	.course-item { margin-bottom: 10px; }
}

/* News */
.home-news { margin: 20px 0; }
.box-card.news-item { margin-bottom: 20px; }
.box-card.news-item:hover { transform: translateY(-10px); box-shadow: 0 30px 30px -20px #00000035; }
.news-item > .metas { padding: 20px; font-size: 11px; }
.news-item > .metas > time,
.news-item > .metas > time > .fa { margin-right: 10px; }
.news-item > .metas > .tags { padding: 1px 5px; background: #444; color: #fff; border-radius: 2px; }
.news-item > .caption { padding: 0 20px 20px; }
.box-card.news-item > .caption > .c-text { margin-bottom: 20px; -webkit-line-clamp: 3; }
@media (max-width: 580px) {
	.home-news { margin: 10px 0; }
}

/* Footer */
footer { margin-top: 40px; padding-top: 40px; font-size: 14px;}
footer.white { background: #fff; border-top: 1px solid #00000010; }
footer.dark { background: #444; color: #ccc; }
footer .footer-bottom { margin-top: 40px; padding-top: 10px; padding-bottom: 10px; }
footer.white .footer-bottom { color: #999; border-top: 1px solid #00000010; }
footer.dark .footer-bottom { color: #999; border-top: 1px solid #00000030; }
footer .widget > .w-title { position: relative; margin: 0 0 20px; font-size: 18px; font-weight: bold; }
footer.white .widget > .w-title { color: #444; }
footer.dark .widget > .w-title { color: #fff; }
footer .widget > .w-title.dash-bottom:after { margin: 10px 0; display: block; content: ""; width: 20px; height: 1px; background-color: #ccc;  }
footer.white .widget > a,
footer.white .widget > .w-links a { color: #444; }
footer.dark a,
footer.dark .widget > a,
footer.dark .widget > .w-links a { color: #ccc; }
footer .widget > .w-links { display: flex; width: 100%; justify-content: space-between; }
footer .widget > .w-links li { margin-bottom: 6px; }
footer .widget > .w-links li > a { display: block; padding-left: 20px; line-height: 1.2; border-left: 1px solid #ccc; }
footer img.img-responsive { transform: scale(1.55); transform-origin: left top; }
@media (max-width: 780px) {
	footer .footer-top img { margin: 0 auto; }
	footer .widget { margin-top: 20px; }
}
@media (max-width: 580px) {	
	footer .widget > .w-links { flex-wrap: wrap; }
	footer .widget > .w-links > ul { flex: 1 1 50%; }
	footer img.img-responsive { transform: unset; }
}

/* Pages - Header */
.course-links { display: flex; justify-content: flex-end; align-items: center; }
.links-button { display: none; }
.links-phone { padding-right: 20px; font-size: 20px; font-weight: bold; }
.links-phone .fa { margin-right: 5px; font-size: 24px; color: #FE5503; vertical-align: middle; }
.links-phone > span > a { margin-right: 5px; color: #FE5503; }
.links-phone > span > a:last-child { color: #000; }
.course-links > .links-facebook { display: flex; background: #324B8D; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.1; border-radius: 4px; overflow: hidden; }
.course-links > .links-facebook > .fa { padding: 10px; width: 40px; background-color: #43609A; font-size: 20px; color: #fff; line-height: 20px; text-align: center; }
.course-links > .links-facebook > span { display: none; padding: 10px 15px 10px 10px; text-align: left; }
.course-links > .links-facebook > span > small { display: none; font-size: 11px; color: #fff; }
@media (max-width: 768px) {
	.course-links { justify-content: space-between; }
	.course-links > .links-button { display: none; width: 40px; height: 40px; background: #cc1a1a; color: #fff; font-size: 18px; text-align: center; line-height: 40px; border-radius: 3px; }
	.course-links > .links-phone,
	.course-links > .links-facebook,
	.course-links > .links-phone .fa { font-size: 18px; }
	.course-links > .links-phone { padding: 0; margin: auto;}
	.course-links > .links-facebook > span { padding-top: 13px; }
} 
/*
@media (max-width: 580px) {
	.course-aside { display: none; }
}
*/

/* Pages - Menu */
.page-main .page-inner { display: flex; margin-left: -10px; margin-right: -10px; }
.page-main .page-content { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; width: calc(100% - 240px); }
.page-main .page-content > article { background: #fff; border: 1px solid #00000015; border-radius: 4px; }
.page-heading { padding: 20px; border-bottom: 1px solid #00000015; }
.page-heading .p-title { margin: 0; font-weight: bold; font-size: 24px; }
.page-heading .p-title span { color: #cc1a1a; }
.page-heading time { display: block; padding: 10px 0 0; font-size: 14px; color: #888; line-height: 20px; }
.page-details { padding: 10px; }
.p-subtitle { margin: 0; font-weight: bold; font-size: 22px; }
.page-main .news-item { margin-bottom: 20px; }
@media (max-width: 580px){
	.page-main .page-inner { flex-direction: column; }
	.page-main .page-content { width: 100%;}
}

/* Pages - Aside - Course */
.course-aside { min-width: 240px; }
.course-container { width: calc( 100% - 240px); }

@media (min-width: 768px) {
	.course-container { width: 100% }
}
@media (min-width: 992px) {
	.course-container { width: calc( 980px - 25%); }
}
@media (min-width: 1200px) {
	.course-container { width: calc( 1180px - 240px); }
}
@media (max-width: 767px) {
	.course-container { width: 100% }
}
.course-container .breadcrumb,
.page-content .breadcrumb { margin-bottom: 10px; text-align: right; font-size: 12px; }
.course-container .breadcrumb span:after,
.page-content .breadcrumb span:after { display: inline; content: ">"; margin: 0 8px; }
.course-container .breadcrumb span:last-child:after,
.page-content  .breadcrumb span:last-child:after { display: none; content: unset; }

.nav-course { margin-bottom: 20px; background-color: #fff; border: 1px solid #00000010; border-radius: 4px; overflow: hidden; }
.nav-course > .accordion-group > .accordion-heading { border-top: 1px solid #00000010; }
.nav-course > .accordion-group:first-child > .accordion-heading { border-top: 0; }
.nav-course > .accordion-group > .accordion-heading > a { display: block; padding: 8px 5px; background: linear-gradient( 360deg, #FE5503, #FF8400d1); color: #fff; font-size: 16px; line-height: 24px; font-weight: bold;  }
.nav-course > .accordion-group > .accordion-heading > a:before { float: left; display: block; content: ""; margin: 0 8px 0 0; width: 3px; height: 24px; background: #ffffff; vertical-align: middle; border-radius: 2px; transition: 0.15s; }
.nav-course .accordion-inner ul > li { border-bottom: 1px solid #00000010; }
.nav-course .accordion-inner ul > li:last-child { border-bottom: 0; }
.nav-course .accordion-inner ul > li > a { display: block; padding: 10px 20px; font-size: 14px; line-height: 20px; }
.nav-course .accordion-inner ul > li > a:before { float: left; display: block; content: "●"; margin-right: 8px; font-size: 12px; vertical-align: middle; opacity: 0.65; }
.nav-course .accordion-inner ul > li > a:hover,
.nav-course .accordion-inner ul > li > a:focus,
.nav-course .accordion-inner ul > li > a.active { background-color: #f8f8f8; color: #FE5503; }

/* Pages - Aside - Links */
.text-links { margin: 20px 0; background: #fff; border: 1px solid #00000010; border-radius: 4px; overflow: hidden; }
.text-links ul > li { border-bottom: 1px solid #00000010; }
.text-links ul > li:last-child { border-bottom: 0; }
.text-links ul > li > a { display: block; padding: 8px 5px; background-color: #0872d4; color: #fff; font-size: 16px; font-weight: bold; line-height: 24px; }
.text-links ul > li > a:before { float: left; display: block; content: ""; margin: 0 8px 0 0; width: 3px; height: 24px; background: #ffffff; vertical-align: middle; border-radius: 2px; }
.text-links ul > li > a:hover,
.text-links ul > li > a:focus,
.text-links ul > li > a.active { background-color: #1c61a2; color: #fff; }

.img-links ul > li { margin: 10px 0; }
.img-links ul > li > a { display: block; position: relative; border: 1px solid #00000010; border-radius: 4px; overflow: hidden;  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); }
.img-links ul > li > a > img { display: block; outline: none; border-radius: 3px;transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); width:100%; margin: auto; }
.img-links ul > li > a > span { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 10px; background: rgba(0,0,0,0.5); font-size: 14px; font-weight: bold; border-radius: 0 0 3px 3px; transition: all 0.15s cubic-bezier(0, 0, 0.2, 1); color:#FFF; text-align: center;}
.img-links ul > li > a:hover { transform: translateY(-5px); box-shadow: 0 10px 10px -10px #FE550385; }
.img-links ul > li > a:hover > img { opacity: 0.35; }
.img-links ul > li > a:hover > span { background: #FE5503; color: #fff; }

/* Pages - Aside - News-Topic */
.widget-newslist { margin: 20px 0; padding: 15px; background: #fff; border: 1px solid #00000010; border-radius: 4px; }
.widget-newslist .w-title { margin: 0 0 20px; font-size: 18px; font-weight: bold; color: #444; }
.widget-newslist .w-title.dash-bottom:after { display: block; content: ""; margin: 10px 0; width: 20px; height: 1px; background: #d6d6d6; }
.widget-newslist ul { margin-bottom: 15px; }
.widget-newslist ul > li { margin-bottom: 8px; }
.widget-newslist ul > li:last-child { margin-bottom: 0; }
.widget-newslist ul > li > a { display: block; position: relative; padding-left: 15px; font-size: 14px; }
.widget-newslist ul > li > a:before { position: absolute; left: 0; display: block; content: "●"; margin-right: 8px; font-size: 12px; vertical-align: middle; opacity: 0.65; }

/* Pages - Course - Search */
.form-open { display: none; margin: 0; padding: 10px; background: #FDFDF5; text-align: center; border: 1px solid #00000015; border-radius: 4px;}
.form-course-search { margin: 20px 0; padding: 20px 40px; background: #FDFDF5; border: 1px solid #00000010; border-radius: 4px; font-size: 14px; }
.form-course-search .form-group:last-child { margin-bottom: 0; }
.links-history { float: right; }
@media (max-width: 580px) {
	.form-open { display: block; }
	.links-history { float: none; }
	.form-course-search { display: none; margin: 0 0 10px; padding: 20px 10px 0; }
	.form-course-search .form-group [class^='col-'],
	.form-course-search .form-group [class*='col-'] { margin-bottom: 10px; }
	.form-course-search .form-group .readonly { display: none; }
}

/* Pages - Course - Banner */
.page-course-banner { position: relative; padding-right: 16px; }
.page-course-banner .owl-wrapper-outer { border-radius: 4px 0 4px 4px; height: 100%; }
.page-course-banner .owl-wrapper-outer .owl-item .item { padding-top: 38.71%; background-position: center; background-size: cover; }
.page-course-banner .owl-wrapper-outer .owl-item a { display: block; }
.page-course-banner .owl-controls { position: absolute; right: 0; top: 0; }
.page-course-banner .owl-controls .owl-pagination { border-radius: 0 4px 4px 0; overflow: hidden; }
.page-course-banner .owl-controls .owl-page { width: 16px; height: 20px; background: #444; color: #fff; text-align: center; }
.page-course-banner .owl-controls .owl-page.active { background: #FF6229; }
@media (max-width: 580px) {
	.page-course-banner { margin-bottom: 10px; padding-right: 0; }
	.page-course-banner .owl-wrapper-outer { border-radius: 4px; }
	.page-course-banner .owl-controls { position: static; }
	.page-course-banner .owl-controls .owl-pagination { display: flex; justify-content: center; margin: 0 auto; border-radius: 0 0 4px 4px; }
	.page-course-banner .owl-controls .owl-page:first-child { border-radius: 0 0 0 4px; }
	.page-course-banner .owl-controls .owl-page:last-child { border-radius: 0 0 4px 0; }
}

/* Pages - Course - Grid & List */
.page-title { margin: 0; padding: 0; font-size: 18px; font-weight: bold; line-height: 30px; }
.course-title > .btn-back { margin-left: 1em; font-size: 12px; color: #fe5505; vertical-align: middle; }
.course-title > .btn-back:hover, .course-title > .btn-back:focus { color: #444; }
.course-title > .btn-back > .fa { font-size: 14px; }
.sort-gruop { display: flex; justify-content: flex-end; }
.sort-button { display: flex; align-items: center; margin-left: 10px; }
.sort-button:before { display: inline; content: attr(data-text); margin-right: 10px; font-size: 14px; }
.sort-button > a { padding: 4px 8px; background-color: #fff; text-align: center; line-height: 20px; border: 1px solid #00000030; border-radius: 4px; cursor: pointer; }
.sort-button > a:first-child { border-right: 0; border-radius: 4px 0 0 4px; }
.sort-button > a:last-child { border-radius: 0 4px 4px 0; }
.sort-button > a.active { background: #FF6229; color: #fff; }
@media (max-width: 580px) {
	.course-title { margin: 20px 0 10px; text-align: center; }
	.sort-gruop { justify-content: space-between; }
}

.course-heading { margin-left: 10px; margin-right: 10px; }
.course-heading .box-heading { display: flex; align-items: center; background: linear-gradient(180deg, #ffffff, #00000010); border: 1px solid #e5e5e5; border-radius: 4px 4px 0 0;}
.course-heading .box-heading * { margin: 0; padding: 0; font-size: 14px !important; font-weight: bold; }
.course-heading .box-heading > .image { flex: 0 0 60px; padding: 0 10px; opacity: 0; }
.course-heading .box-heading > .caption { display: flex; flex: 1 1 auto; align-items: center; }
.course-heading .box-heading > .caption > .c-title { flex: 1 1 auto; padding: 0 15px; }
.course-heading .box-heading > .caption > .c-time { display: flex; flex: 0 0 35%; align-items: center; }
.course-heading .box-heading > .caption > .c-time > span { flex: 1; padding: 5px 10px; text-align: center; border-left: 1px solid #e5e5e5; }
.course-heading .box-heading > .caption > .c-time > span.hours { flex: 0 0 60px;}

.course-card { margin: 20px 0; margin-left: -10px; margin-right: -10px; }
.course-inner { float: left; }
.course-inner:before, .course-inner:after { display: table; content: ""; clear: both; }
.course-inner > .course-item > .image > .tags { border-radius: 2px 2px 2px 0; }
.course-inner > .course-item > .image > .tags:after { border-left-color: transparent; border-bottom-color: transparent; }

.course-inner > .course-item > .image > .tagsO { background: #FF6229; }
.course-inner > .course-item > .image > .tagsO:after { border-color: #c74c25; border-left-color: transparent; border-bottom-color: transparent; }
.course-inner > .course-item > .image > .tagsG { background: #68a739; }
.course-inner > .course-item > .image > .tagsG:after { border-color: #68a739; border-left-color: transparent; border-bottom-color: transparent; }
.course-inner > .course-item > .image > .tagsP { background: #804d9b; }
.course-inner > .course-item > .image > .tagsP:after { border-color: #804d9b; border-left-color: transparent; border-bottom-color: transparent; }
.course-inner > .course-item > .image > .tagsR { background: #e71f19; }
.course-inner > .course-item > .image > .tagsR:after { border-color: #e71f19; border-left-color: transparent; border-bottom-color: transparent; }

.home-course .course-item > .image > .tagsO { background: #FF6229; }
.home-course .course-item > .image > .tagsO:after { border-color: #c74c25; border-left-color: transparent; border-bottom-color: transparent; }
.home-course .course-item > .image > .tagsG { background: #68a739; }
.home-course .course-item > .image > .tagsG:after { border-color: #68a739; border-left-color: transparent; border-bottom-color: transparent; }
.home-course .course-item > .image > .tagsP { background: #804d9b; }
.home-course .course-item > .image > .tagsP:after { border-color: #804d9b; border-left-color: transparent; border-bottom-color: transparent; }
.home-course .course-item > .image > .tagsR { background: #e71f19; }
.home-course .course-item > .image > .tagsR:after { border-color: #e71f19; border-left-color: transparent; border-bottom-color: transparent; }

.course-inner > .box-card .c-title a { color: #444; 
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical;
	min-height: 3em;
}
.course-inner > .box-card:hover > .caption > .c-title > a { color: #FF6229; }
.course-inner > .box-card p.c-time  { color: #358AD9; }
.course-inner > .box-card > .caption > .btn.btn-default { background-color: #FF6229; }
.course-inner.grid { padding-left: 10px; padding-right: 10px; width: 50%; /*height: 150px; overflow: hidden;*/}
.course-inner.grid .box-card { display: flex; }
.course-inner.grid .box-card .image { flex: 0 0 40%; }
.course-inner.grid .box-card .image > a:after { display: none; top: 0; left: 20%; width: auto; height: auto; background: linear-gradient(90deg, #ffffff00, #ffffff 80%);}
.course-inner.grid .box-card .image > a > img { border-radius: 3px 0 0 3px; }
.course-inner.grid .box-card .image .tags { top: 10px; bottom: unset !important; }
.course-inner.grid .box-card .caption > .c-time { /*transform: translateY(100%);*/ transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden;}
.course-inner.grid .box-card .caption > .c-time > span { margin-right: 10px; }
.course-inner.grid .box-card .caption > .c-time > span:last-child { margin-right: 0; }
.course-inner.grid .box-card:hover .image .tags,
.course-inner.grid .box-card:hover .caption { transform: unset; }
/*.course-inner.grid .box-card:hover .caption > .c-time { transform: translateY(-5px); }*/
.course-inner.grid .box-card .caption > .btn.btn-default { display: none; }
.course-inner.grid .box-card:hover .caption > .btn.btn-default { bottom: 0; border-radius: 0 0 3px 0; }
.course-inner.grid .tags-meta { padding: 0; margin-bottom: 8px; min-height: 24px; opacity: 0; visibility: hidden; }

.course-inner.list { float: none; width: 100%; }
.course-inner.list .box-card { display: flex; margin-left: 10px; margin-right: 10px; margin-bottom: -1px; align-items: center; border-radius: 0; padding: 5px 0; }
.course-inner.list .box-card > .image { flex: 0 0 60px; padding: 5px;}
.course-inner.list .box-card > .image > a > img { border-radius: 3px; opacity: 0;}
.course-inner.list .box-card > .image > .tags { top: 10px; bottom: unset !important; }
.course-inner.list .box-card > .caption { display: flex; flex: 1 1 auto; align-items: stretch; padding: 0; }
.course-inner.list .box-card > .caption > .c-title { margin-bottom: 0; padding: 0 15px; }
.course-inner.list .box-card > .caption > .c-title { flex: 1 1 auto; }
.course-inner.list .box-card > .caption > .c-time { flex: 0 0 35%; display: flex; gap: 1rem; }
.course-inner.list .box-card > .caption > .c-time > .fa { display: none; }
.course-inner.list .box-card > .caption > .c-time > span { flex: 1; padding: 0 10px; border-left: 1px solid #e5e5e5; text-align: center; }
.course-inner.list .box-card > .caption > .c-time > span.hours { flex: 0 0 60px;}
.course-inner.list:nth-of-type(even) .box-card{ background:#EFEFEF;} 

.course-inner.grid .box-card > .caption > .c-time > span.hours { display: none;}
.course-inner.list .tags-meta { display: none;}


@media (max-width: 580px) { 
	.course-card { display: flex; flex-wrap: wrap; }
	.course-inner.grid { float: none; padding-left: 5px; padding-right: 5px;}
	.course-inner.grid .course-item { flex-wrap: wrap;}
	.course-inner.grid .course-item .image { flex: 1 1 100%; }
	.course-inner.grid .course-item .image > a > img { border-radius: 3px 3px 0 0; }
	.course-inner.grid .box-card .image > a:after { left: 0; top: unset; bottom: 0; height: 80%; background: linear-gradient(180deg, #ffffff00, #ffffff 80%); }
	.course-inner.grid .box-card:hover .caption { transform: translateY(-5px); }
	.course-inner.grid .box-card .caption > .c-time { transform: unset; font-size: 14px; }
	.course-inner.grid > .box-card:hover .caption > .btn.btn-default { transform: translateY(15px); border-radius: 0 0 3px 3px; }
	.course-inner.list .box-card > .caption > .c-time > span.hours { display: none; }
}

/*.course-inner.list .box-card:hover,*/
.course-inner.list .box-card:hover .image .tags,
.course-inner.list .box-card:hover .caption { transform: unset; }
.course-inner.list .box-card:hover .image > a:after { display: none; }
.course-inner.list .box-card > .caption > .btn.btn-default { display: none; }

@media (max-width: 580px) { 
	.nav-course { margin-bottom: 10px; }
	.course-card { margin-left: -5px; margin-right: -5px; margin-top: 10px; margin-bottom: 10px; }
	.text-links,
	.widget-newslist { margin: 10px 0; }

	.course-heading { display: none !important; }
	.course-inner.list .box-card { margin-bottom: 10px; }
	.course-inner.list .box-card > .image { flex: 0 0 110px; padding: 0 5px; }
	.course-inner.list .box-card > .image > a { opacity: 1; }
	.course-inner.list .box-card > .image > .tags { top: 5px; }
	.course-inner.list .box-card > .caption { flex-wrap: wrap; }
	.course-inner.list .box-card > .caption > .c-title,
	.course-inner.list .box-card > .caption > .c-time { flex: 1 1 100%; padding: 0 5px; }
	.course-inner.list .box-card > .caption > .c-time { margin-top: 5px; }
	.course-inner.list .box-card > .caption > .c-time > span { flex: 0 0 auto; padding: 0; font-size: 12px; border-left: 0; }	

	.course-inner.grid .tags-meta > li { display: none; }
	.course-inner.grid .tags-meta > li:nth-child(1),
	.course-inner.grid .tags-meta > li:nth-child(2) { display: inline !important; } 
}

/* Page - Course - Detail */
.course-box { margin: 0 0 20px; background: #fff; border: 1px solid #00000015; border-radius: 4px; }
.course-box .page-title { padding: 20px 20px 5px; }
.tags-meta { padding: 10px 20px 0; }
.tags-meta > li { display: inline-block; }
.tags-meta > li > a { padding: 2px 4px; background: #737373; font-size: 12px; color: #fff; border-radius: 2px; }
.addthis_inline_share_toolbox_uxis { padding-right: 20px; text-align: right; }
.at-resp-share-element .at-share-btn { margin: 0 0 0 5px !important; }
.orange { /*background: #FE5503 !important;*/ background: #737373 !important; }
.purple { background: #6476da !important; }
.custom-warning { padding: 15px; background-color: #fcf8e3; color: #960; font-size: 13px; }
.course-box hr { margin-bottom: 0; }
.fck-box { padding: 20px; }
/*.fck-box * { font-family: 'Arial', '微軟正黑體', sans-serif !important; line-height: 1.8 !important; word-break: break-all; }
.fck-box p, .fck-box span { font-size: 16px !important; }*/
.fck-box * { max-width: 100%;}
.fck-box img { max-width: 100%; height: auto !important; }
.fck-box center + p,
.fck-box img + p { margin-top: 20px; }
.fck-box h1, .fck-box h2, .fck-box h3, .fck-box h4, .fck-box h5, .fck-box h6 { margin: 0 0 20px; font-weight: bold; color: #222; }
.fck-box .dash-bottom:after { display: block; content: ""; margin: 10px 0; width: 20px; height: 1px; background-color: #FE5503; }
.fck-box p { margin-bottom: 1.5em; /*font-size: 15px !important;*/ line-height: 1.8;}
.fck-box ul,
.fck-box ol,
.course-box .dl-tabel dd ul,
.course-box .dl-tabel dd ol { margin: 20px 0; padding-left: 20px;}
.fck-box ul > li,
.fck-box ol > li,
.course-box .dl-tabel dd ul > li,
.course-box .dl-tabel dd ol > li { display: list-item; margin: 2px 0; }

.fck-box ol,
.course-box .dl-tabel dd ol { list-style: decimal;}

.fck-box ul, .fck-box ul ul ul,
.course-box .dl-tabel dd ul, .course-box .dl-tabel dd ul ul ul { list-style: disc;}
.fck-box ul ul, .course-box .dl-tabel dd ul ul { margin: 5px 0; list-style: circle;}


.fck-box ul.styled { padding-left: 20px; list-style: circle; }
.fck-box ul.time-list,
.fck-box ol.time-list { padding-left: 0; list-style: none;}
.fck-box ul.time-list > li,
.fck-box ol.time-list > li { position: relative; padding-left: 100px; }
.fck-box ul.time-list a {text-decoration:underline;}
.fck-box ul > li > time,
.fck-box ol > li > time { position: absolute; left: 0; top: 0; font-family: "Arail", sans-serif; }
.fck-box hr { margin: 40px 0; }

ol.cjk {list-style-type: cjk-ideographic;}
ol.decimal {list-style-type: decimal;}
ol.alpha-upper {list-style-type: upper-alpha;}
ol.alpha-lower {list-style-type: lower-alpha;}
ol.roman-upper {list-style-type: upper-roman;}
ol.roman-lower {list-style-type: lower-roman;}

ul.disc { padding-left: 20px; list-style-type: disc;}
ul.circle { padding-left: 20px; list-style-type: circle;}
ul.square { padding-left: 20px; list-style-type: square;}

.course-box .dl-tabel { display: flex; margin: 0; padding: 0; border-bottom: 1px solid #00000010; }
.course-box .dl-tabel dt,
.course-box .dl-tabel dd { padding: 10px 20px; font-size: 15px; }
.course-box .dl-tabel dt { flex: 0 0 120px; position: relative; font-weight: bold; line-height: 20px; }
.course-box .dl-tabel dt:before { position: absolute; left: 8px; top: 8px; display: block; content: ""; width: 3px; height: 24px; background: linear-gradient( 135deg, #FE5503, #FF8400); border-radius: 3px; }
.course-box .dl-tabel dd { flex: 1 1 auto; width: calc(100% - 120px); border-left: 1px solid #00000010; }
.course-box .dl-tabel dd * { font-family: 'Arial', '微軟正黑體', sans-serif !important; line-height: 1.8 !important; font-size: 15px !important; }
.course-box .dl-tabel dd ol { padding: 0 0 0 20px; }
.course-box .dl-tabel dd ol > li > ol { margin: 10px 0; }
.course-box .dl-tabel dd .price > b { font-size: 18px; font-weight: bold; color: #FF6128; }
.course-box .dl-tabel dd p:last-child { margin-bottom: 0; }
.course-box .dl-tabel dd img { max-width: 100%; height: auto !important; }
.course-box .button-bottom { padding: 10px; }
.course-box .fixed-apply { position: fixed; right: 20px; top: 50%; z-index: 999; transform: translateY(-50%);}
.course-box .fixed-apply > a { display: block; width: 40px; text-align: center; }
.course-box .fixed-apply > a:first-child { padding: 10px; background: linear-gradient( 135deg, #FE5503, #FF8400); font-weight: bold; color: #fff; border-radius: 4px 4px 0 0; }
.course-box .fixed-apply > a:last-child { padding: 10px 5px; background: #444; color: #fff; font-size: 12px; border-radius: 0 0 4px 4px; }
.flex-box { display: flex; flex-wrap: wrap; align-items: center; }
.flex-box > time { padding-right: 10px; }
/*
.dl-wrap { position: relative; }
.dl-wrap div.more { position: absolute; left: 0; right: 0; bottom: 0; display: none; margin-top: 15px; padding: 5px 0; background: linear-gradient(180deg, #fff, #efefef); border: 1px solid #d6d6d6; border-radius: 3px; text-align: center; font-size: 14px !important; }
.dl-wrap div.more.tw:before { display: block; content: "收起"; }
.dl-wrap.open div.more.tw:before { display: block; content: "展開"; }
.dl-wrap div.more.en:before { display: block; content: "Close"; }
.dl-wrap.open div.more.en:before { display: block; content: "Open"; }
 */
@media (max-width: 580px) {
	.addthis_inline_share_toolbox_uxis { padding-right: 0; }
	.course-top .dl-tabel,
	.course-bottom .dl-tabel { flex-direction: column; }
	.course-top .dl-tabel dt,
	.course-top .dl-tabel dd,
	.course-bottom .dl-tabel dt,
	.course-bottom .dl-tabel dd,
	.course-box .dl-tabel dd { flex: 1 1 100%; width: 100%; }
	.course-bottom .dl-tabel:nth-child(1) dt,
	.course-bottom .dl-tabel:nth-child(2) dt,
	.course-bottom .dl-tabel:nth-child(3) dt { /*flex: 0 0 120px; */ flex: 1 1 100%;}
	.course-bottom .dl-tabel:nth-child(1) dd,
	.course-bottom .dl-tabel:nth-child(2) dd,
	.course-bottom .dl-tabel:nth-child(3) dd { flex: 1 1 auto; }
	/*
	.course-bottom .dl-tabel.dl-tabel-inline dt { flex: 0 0 120px; width: calc(100% - 120px);}
	.course-bottom .dl-tabel.dl-tabel-inline dd { flex: 1 1 auto; width: calc(100% - 120px);}
	
	.dl-wrap { height: auto; }
	.dl-wrap.open { height: 125px; overflow: hidden;}
	.dl-wrap div.more { position: static; display: block;}
	.dl-wrap.open div.more { display: block; position: absolute; }
	*/
}

/* Page - Course - Signup */
.signup-title { margin: 0; padding: 10px 15px; background: linear-gradient( 180deg, #ffffff, #e5e5e5); font-size: 18px; font-weight: bold; line-height: 20px; border-radius: 3px 3px 0 0; }
.signup-subtitle { margin: 0; padding: 8px 15px 5px 15px; background: #444; font-size: 16px; color: #fff; border-bottom: 3px solid #FE5503;}
.signup-infotitle { position: relative; margin: 0; padding: 15px; background: #fff; font-size: 16px; color: #000; font-weight: bold; border-bottom: 1px solid #e5e5e5;}
.signup-infotitle .pull-right { margin-top: -5px; }
.signup-infotitle:after { position: absolute; left: 0; bottom: -1px; display: block; content: ""; width: 100px; height: 1px; background: #000; }

.course-bottom .signup-subtitle { border-radius: 3px 3px 0 0; }
.signup-form { padding-top: 10px; background: #e5e5e5; }
.signup-form .nav-tabs { text-align: center; }
.signup-form .nav-tabs > li { float: none; display: inline-block; }
.signup-form .nav-tabs > li > a { margin: 0; padding: 8px 20px 5px 20px; }
.signup-form .nav-tabs > li > a > .fa { margin-right: 10px; }
.signup-form .nav-tabs > li.active > a { color: #FE5503; }
.signup-form .tab-content { padding: 0; background: #fff; }
.signup-form .tab-content .dl-tabel dt.required:after { position: absolute; right: 8px; top: 12px; display: inline; content: "*"; color: #FE5503; } 
.signup-form .tab-content .dl-tabel dd { padding: 5px; }
.signup-form .tab-content .dl-tabel dd > label { margin: 2px 20px 0 0; vertical-align: middle; }
.signup-form .tab-content .dl-tabel dd > label > input { margin: 0; }
.signup-form .tab-content .dl-tabel dd > .flex-box > div { flex: 1; padding-right: 5px; }
.signup-form .tab-content .dl-tabel dd > .flex-box > div:last-child { padding-right: 0; }
.signup-form .tab-content .flex-box dl { flex: 1; }

#form-extend { padding: 5px 10px; background-color: #fbf4e9; }
#form-extend .form-origin { margin: 5px 0; background-color: #fff; border: 2px solid #fbe4c2; border-radius: 4px; overflow: hidden; }
#form-extend .form-origin .flex-box:last-child .dl-tabel { border-bottom: none !important; }
#form-extend .form-origin .button-bottom { padding: 5px; background: linear-gradient( 180deg, #ffffff, #f4f4f4); border-bottom: 1px solid #e5e5e5; }
.form-addmore { margin: 10px; padding: 15px; background-color: #f4f4f4; text-align: center; border: 1px dotted #999; }
.form-addmore .btn > .fa { margin-right: 10px; }
.dl-payment { margin-bottom: 20px; }
.dl-payment h6 { padding: 2px 4px; font-size: 16px; font-weight: bold; background: linear-gradient( -90deg, #fff, #ffecb3); border-radius: 3px; }
.dl-payment p { margin-bottom: 20px; padding-left: 5px; }

@media (max-width: 580px) {
	.tab-pane .flex-box { flex-wrap: wrap; }
	.signup-form .tab-content .flex-box dl.dl-tabel { flex: 1 1 100%; }
	.signup-form .tab-content dl.dl-tabel dt { flex: 0 0 auto; }
}

/* Page - Course - Teacher */
.teacher-item { margin-bottom: 20px; }
.teacher-box { padding: 20px; border-bottom: 1px solid #00000015; }
.teacher-box:last-child { border-bottom: unset; }
.teacher-item.box-card .caption > h3.c-title > a { display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.widget-teacher .w-title  { margin: 20px 0 10px; padding: 0 10px; font-size: 20px; font-weight: bold; }
.widget-teacher .w-title.dash-bottom:after { margin: 10px 0; display: block; content: ""; width: 20px; height: 1px; background-color: #ccc;  }
.widget-teacher p { padding: 0 10px; }
.widget-teacher .tags-meta { margin-bottom: 10px; padding: 0 10px; }
@media (max-width: 580px) {
	.teacher-list { margin-left: -5px; margin-right: -5px; }
	.teacher-list [class^='col-xs'],
	.teacher-list [class*='col-xs'] { padding-left: 5px; padding-right: 5px; }
	.widget-teacher .img-thumbnail { margin-right: auto; margin-left: auto; }
	.teacher-box { padding: 10px; }
	.teacher-box .fck-box { margin-top: 10px; padding: 20px 10px 10px !important; }
}

/* Page - News - list */
.solid-bottom { margin: 0 0 20px; }
.solid-bottom:after { display: block; content: ""; margin: 10px 0; border-bottom: 1px solid #e5e5e5; }

/* Page - contact */
.contact-form,
.contact-map { padding: 20px; }
.contact-form .info-title span { color: #cc1a1a; }
.contact-form .validate { padding-left: 20px; }
.contact-form .button-bottom { margin: 20px 0 0; padding: 0 0 40px; border-bottom: 1px solid #00000015; }
.contact-map .w-title  { margin: 20px 0; font-size: 16px; font-weight: bold; }
.contact-map .w-title.dash-bottom:after { margin: 10px 0; display: block; content: ""; width: 20px; height: 1px; background-color: #ccc;  }
.contact-radio .col-sm-4 { padding-left: 0}

/* Page - Member */
.member-box { padding-top: 10px; background: #444; }
.member-box .nav-tabs { text-align: center; }
.member-box .nav-tabs > li { float: none; display: inline-block; }
.member-box .nav-tabs > li > a { margin: 0; padding: 8px 20px 5px 20px; background-color: #ffffff90; }
.member-box .nav-tabs > li.active > a { background-color: #ffffff; }
.member-box .nav-tabs > li > a > .fa { margin-right: 10px; }
.member-box .tab-content { padding: 0; background: #fff; }

.member-form { padding: 50px 0; }

.member-history .flex-box { padding: 20px 10px; justify-content: flex-end; }
.member-history .flex-box div { padding: 0 10px; }
.member-history .table-responsive { margin: 0 20px 20px; }
.member-history .table > thead > tr > th { background: linear-gradient( 180deg, #fff, #e5e5e5);}
.member-history .table > tbody > tr > td { padding: 5px; border: 1px solid #d6d6d6; }
.member-history .t-name > a { font-weight: bold; text-decoration: underline; }
.member-history .t-name > a:hover { color: #FE5503; }
.member-history .t-name > span { color: #cc1a1a; }
.member-history td.t-price { font-family: "Arail", sans-serif; font-size: 16px; font-weight: bold; color: #FE5503; }
.member-history td.t-price small { font-weight: normal; }
.member-history .t-date,
.member-history .t-time,
.member-history .t-number,
.member-history .t-price,
.member-history .t-status { white-space: nowrap; }
@media (max-width: 580px) {
	.member-form { padding: 20px; }
	.member-history { padding: 0; }
	.member-history .flex-box { padding: 10px 0; justify-content: space-between; }
	.member-history .flex-box div:first-child { flex: 1 1 auto; padding-right: 0; }
	.member-history .table-responsive { margin: 0; border-top: 1px solid #e5e5e5 !important; }
	.member-history .table > tbody { display: block; padding: 0 10px; }
	.member-history .t-name > a { font-size: 14px; }
	.member-history td.t-price { color: unset; font-size: 14px; }
}

/* Pagination */
.page-pagination { margin: 20px 0; text-align: center; }
.page-pagination ul { margin: 0 auto; text-align: center; width: 100%; display: table; }
.page-pagination ul > li { display: inline-block; }
.page-pagination ul > li > a { display: block; padding: 9px; width: 40px; background: #fff; font-size: 14px; text-align: center; line-height: 20px; border: 1px solid #e5e5e5; border-radius: 4px; }
.page-pagination ul > li > a.active { background: #FF6229; color: #fff; font-weight: bold; }

.widget-info { padding: 20px; background: url(../images/img-280-240.png) no-repeat center; background-size: cover; border: 1px solid #e5e5e5; border-radius: 4px; }
.widget-info .w-title { margin: 0 0 20px; font-size: 16px; font-weight: bold; }
.widget-info .w-title.dash-bottom:after { margin: 10px 0; display: block; content: ""; width: 20px; height: 1px; background-color: #ccc;  }
.widget-info .w-text { margin: 0 0 25px; font-size: 14px; color: #666; line-height: 1.6;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
.widget .read-more { font-size: 14px; }
.widget-info .read-more { font-size: 14px; font-weight: bold; }

/* Popup */
.pop-box { position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 50%; background: #fff; border-radius: 4px; }
.pop-box .pop-header { padding: 10px 15px; background: linear-gradient( 90deg, #FE5503, #FF8400); color: #fff; border-radius: 4px 4px 0 0; }
.pop-box .pop-header h4 { margin: 0; font-size: 20px; font-weight: bold; }
.pop-box .pop-header a.pop-close { position: absolute; right: 0; top: 0; padding: 10px 15px; color: #fff; }
.pop-box .pop-center { padding: 20px; }
.pop-box .pop-center .fck-box { padding: 20px; max-height: 400px; background: #f4f4f4; border: 1px solid #00000010; overflow-y: auto; }
.pop-box .pop-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-top: 1px solid #e5e5e5; }
.pop-box .pop-footer label { margin: 0; }
.pop-box .pop-footer label > input { margin-right: 8px; }
.pop-box .pop-footer .pop-button { text-align: right; }
.pop-box .pop-footer .pop-button .btn.btn-orange { padding: 5px 20px; font-weight: bold; }
.pop-box .pop-footer .pop-button .btn.btn-orange:hover,
.pop-box .pop-footer .pop-button .btn.btn-orange:focus { background: #444; }
.pop-overlay { position: fixed; z-index: 9998; left: 0; top: 0; right: 0; bottom: 0; background: #000000; opacity: 0.9; }
@media (max-width: 580px) {
	.pop-box { min-width: 90%; max-width: 90%; }
	.pop-box .pop-center, .pop-box .pop-center .fck-box { padding: 10px; }
	.pop-box .pop-footer { flex-wrap: wrap; padding: 10px; }
	.pop-box .pop-footer label { margin-bottom: 10px; }
	.pop-box .pop-footer .pop-button { text-align: center; width: 100%; }
	.pop-box .pop-footer .pop-button .btn.btn-orange { display: block; }
}

/* Typegraphy CSS Setting */
.pre-box { position: relative; margin: 20px 0 50px 0; padding-top: 28px; }
.pre-box textarea { padding: 2em; width: 100%; height: 300px; border: 2px solid #e60012;}
.pre-box:before { content: '請複製代碼'; display: block; height: 30px; background-color: #e60012; padding: 0 15px; color: #fff; font-size: 14px; line-height: 30px; position: absolute; left: 0; top: 0; }

.multi-img img { margin-bottom: 30px; }

.layout { margin-top: 10px; margin-bottom: 10px; padding: 20px 0; line-height: 1.8; color: #565656;}
.layout h1,
.layout h2,
.layout h3,
.layout h4,
.layout h5,
.layout h6 { margin-top: 1em; margin-bottom: 1em; font-weight: bold; }
.layout h4,
.layout h5,
.layout h6 { margin-bottom: 0.4em; }
.layout img { border-radius: 0;}
.layout-e { margin-left: 0; margin-right: 0; }
.layout-e [class*='col-'],
.layout-e [class^='col-']  { padding-left: 0; padding-right: 0; }
.layout-h h4 { margin: 0; }
.layout-h .panel-title a { display: block; color: #e60012; }
.layout-h .panel-title a.collapsed { color: #222; }
.layout-i:after { display: block; content: ""; margin-left: 15px; margin-right: 15px; padding-top: 30px; border-bottom: 1px dotted #ccc; }
.layout-i a.thumbnail.active, 
.layout-i a.thumbnail:focus, 
.layout-i a.thumbnail:hover { border-color: #e60012; }
.layout-i blockquote { padding-top: 0; padding-bottom: 0; font-size: 14px; }

.custom-tabs { border-bottom-color: #eee; }
.custom-tabs:before,
.custom-tabs:after { display: block; content: ""; clear: both; }
.custom-tabs li a { display: block; margin: 0; padding: 10px 15px; font-size: 16px; font-weight: bold; color: #999; border-radius: 0; border-top-width: 2px!important; border-color: #eee;}
.custom-tabs li a:hover,
.custom-tabs li:hover a { border-top-color: #e60012!important; color: #e60012!important;}
.custom-tabs li.active a { border-top-color: #e60012!important; color: #000!important; }

.layout-g .tab-content { padding: 30px; background-color: #fff; border: 1px solid #ddd; border-top: none;}

@media (max-width: 991px) {
.course-heading .box-heading > .image,
.course-inner.list .box-card > .image > a > img  { opacity: 1;}
.md-hide {display: none;}
.btn { margin-bottom: 10px;}
.mobile-hide {display: none;}
.moblie-row {display: flex; flex-flow: column-reverse;}

.img-links ul { margin-left: -5px; margin-right: -5px; }
.img-links ul:before, .img-links ul:after { display: table; content: ""; clear: both; }
.img-links ul > li { float: left; margin: 0 0 10px; width: 50%; padding-left: 5px; padding-right: 5px; }

.nav-course .accordion-inner ul > li { width: 49%; display: inline-block;}
}

.course-teacher { display: flex; margin-bottom: 20px;}
.course-teacher:last-child { margin-bottom: 0; }
.course-teacher > .avatar { flex: 0 0 140px; margin: 0; }
.course-teacher > .avatar > img { width: 100%; border-radius: 0; }
.course-teacher > .info { padding: 0 20px 0 15px; }
.course-teacher > .info > h3 { margin-top: 0; font-weight: bold; color: #000; }
.course-teacher > .info > p > span { display: block; }

.table-order-history .label-title { display: none; }

#mc-horizontal-nav-course { display: none !important; height: 0; transition: .3s; }

@media (max-width: 480px) {
	.course-teacher { flex-wrap: wrap; }
	.course-teacher > .avatar { flex: 1 1 100%; text-align: center; }
	.course-teacher > .avatar > img { max-width: 50% !important; }
	.course-teacher > .info { padding: 20px 0 0; }
	
	.member-history .table-responsive { border: 0 !important; }
	.table-order-history thead { display: none; }
	.table-order-history tbody > tr { display: block; margin-bottom: 10px; border: 1px solid #999 !important; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
	.table-order-history tbody > tr:last-child { margin-bottom: 0; }
	.table-order-history tbody > tr > td { display: block; border: 0 !important; }
	.table-order-history tbody > tr > td > a { white-space: break-spaces; word-break: break-all; }
	.table-order-history .label-title { display: block; margin: -6px -5px 5px; padding: 2px; font-size: 13px; font-weight: bold; background: linear-gradient(180deg, #fff, #e5e5e5); color: #000 !important; border-top: 1px solid #999; border-bottom: 1px solid #999; }

	.navbar-course { margin: 0 0 0 10px; padding: 13px 9px; background: #FE5503; border-radius: 4px; }
	.navbar-course .icon-bar { background: #fff; }
	#mc-horizontal-nav-course { display: block !important; margin-top: 10px; height: 0; overflow: hidden; }
	#mc-horizontal-nav-course.in { height: auto; opacity: 1; }
	
	.course-inner.list .box-card { border-color: #d6d6d6; border-bottom: 3px solid #a6cadc;  }
	.course-inner.list:nth-of-type(even) .box-card { background: #fff; }

}

.page-filter { margin: 10px 0; }
.tags-box > a { display: inline-block; margin: 0 3px 5px 0; padding: 1px 3px; background: #efefef; font-size: 12px; border-radius: 2px; border: 1px dotted #dedede; }
.tags-box > a:hover { background: #fff; border-color: #999; }

.share-box { padding: 10px 20px 0 0; text-align: right; }
.share-box a { display: inline-block; padding: 2px 5px; font-size: 14px; color: #fff; border-radius: 2px; }
.share-box a:hover { transform: translateY(-2px); }
.share-box a > i { margin-right: 5px; }
.share-box .btn-facebook { background-color: rgb(59, 89, 152); }
.share-box .btn-line { background-color: rgb(0, 185, 0); }