/* Default Setting */
/* 2018/06/06 更新 .navbar_box by dg-hannah */
@import url('/css/css.css');

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
  
.clear:before, .clear:after {
    content: '';
    clear: both;
    display: block;
}

input:focus,
button:focus,
a:focus {
outline: none; }

a { 
    transition: all 0.2s ease-in-out;
}

/* End Default Setting */

body { 
    font-family: 'Roboto', 'Maven Pro', 'Microsoft JhengHei', sans-serif;
}

/*--------------------------------------------------------------------------------*/
.hi_trial_group {
    position: fixed;
    top: 160px;
    right: 0;
    z-index: 20;
    width: 100%;
    height: 385px;
    /* 修改免費試讀欄位高度,避免出現卷軸 */
    max-width: 400px;
}
.hi_trial_group .hi_trial_btn {
    position: absolute;
    left: -94px;
    display: inline-block;
    border-radius: 5em;
    border: 1px solid #aada46;
    background: transparent;
    padding: 0;
    cursor: pointer;
    z-index: 1;
}
.hi_trial_group .hi_trial_btn > span {
    display: inline-block;
    width: 76px;
    height: 76px;
    padding: 10px;
    margin: 3px;
    background: #aada46;
    border-radius: 5em;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
    color: #fff;
}
.hi_trial_group .hi_trial_btn:hover {
    border: 1px solid #6b9b1d;
}
.hi_trial_group .hi_trial_btn:hover > span {
    background: #6b9b1d;
}
.hi_trial_group .pollSlider {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 0.8);
}
.hi_trial_group .pollSlider object {
    width: 100%;
    height: 100%;
}




.hi_popup_news .modal-content {
    border: 4px solid #88ccdc;
}
.hi_popup_news .modal-content .modal-header .modal-title {
    color: #0072c1;
    font-weight: bold;
}
.hi_popup_news .modal-content .modal-header {
    border-bottom: 1px dashed #88ccdc;
}
.hi_popup_news .modal-content .modal-header .close {
    color: #458ead;
}
.hi_popup_news .modal-content .modal-footer {
    justify-content: center;
    border: none;
}
.hi_popup_news .modal-content .modal-footer .btn {
    border: 1px solid #88ccdc;
    background-color: transparent;
    border-radius: .2em;
    color: #88ccdc;
    padding: .2em 1em;
}
.hi_popup_news .modal-content .modal-footer .btn:hover {
    background-color: #458ead;
    color: #fff;
}
/*=========================================
                header
=========================================*/
.hi_header {
    text-align: center;
}
.hi_header .navbar {
    max-width: 1140px;
    margin: 0 auto;
    padding-bottom: 0;
}

.hi_header .navbar .logo {
    display: inline-block;
    width: 100px;
    margin-bottom: .5rem;
}

.hi_header .navbar .top_group_box {
    margin-left: auto;
}
.hi_header .navbar .top_group_box > a,
.hi_header .navbar .top_group_box .btn-group > a {
    display: inline-block;
    margin: 0 .5em;
    color: #ccc;
}
.hi_header .navbar .top_group_box > a:hover,
.hi_header .navbar .top_group_box .btn-group > a:hover {
    color: #86b934;
}
.hi_header .navbar .top_group_box .btn-group .dropdown-menu {
    font-size: .9em;
    min-width: 5rem;
}
.hi_header .navbar .top_group_box .btn-group .dropdown-menu.dropdown-menu-right {
    left: auto;
    right: 0;
}
.hi_header .navbar .top_group_box .btn-group .dropdown-menu .dropdown-item {
    padding: .2rem 1rem;
}
.hi_header .navbar .top_group_box .btn-group .dropdown-menu .dropdown-item:hover {
    background-color: transparent;
    color: #83c617;
}

.hi_header .navbar-collapse {
    margin-right: -1rem;
    margin-left: -1rem;
}
.hi_header .navbar-collapse .navbar_box {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.hi_header .navbar-collapse .navbar_box > a {
    display: inline-block;
    width: 20%;
    text-align: center;
    background-color: #86b934;
    font-size: .9em;
    padding: .5em .2em;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.5);
}
.hi_header .navbar-collapse .navbar_box > a:last-child(){
    border-right: none;
}
.hi_header .navbar-collapse .navbar_box > a:hover {
    text-decoration: none;
    background-color: #6b9b1d;
}
.hi_header .navbar-collapse .navbar-nav {
    background-color: #c0ddef;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
}
.hi_header .navbar-collapse .navbar-nav .nav-item {
    text-align: center;
}
.hi_header .navbar-collapse .navbar-nav .nav-item .nav-link  {
    position: relative;
    color: #4e4e4e;
    font-weight: bold;
    letter-spacing: .2em;
}
.hi_header .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    color: #2f70b8;
}
.hi_header .navbar-toggler {
    position: relative;
    overflow: hidden;
    border: none;
    padding: 9px 10px;
}
.hi_header .navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #2f70b8;
}
.hi_header .navbar-toggler .icon-bar+.icon-bar {
    margin-top: 4px;
}
.hi_header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.hi_header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-100%);
}
.hi_header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}




/*=========================================
                footer
=========================================*/
.hi_footer {
    color: #fff;
    background-color: #525252;
    padding: .5rem 1rem;
}

.hi_footer .logo_box {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 2em;
}
.hi_footer .logo_box .logo,
.hi_footer .logo_box .logo + div {
    vertical-align: middle
}

.hi_footer .logo_box .logo {
    display: inline-block;
    width: 160px;
}

.hi_footer .logo_box .logo + div {
    display: block;
    margin-top: 1em; 
}
.hi_footer .logo_box .logo + div p {
    margin-bottom: 0;
}

.hi_footer .f_link_box {
    border-left: 1px solid #666;
    margin-bottom: 2em;
}
.hi_footer .f_link_box h6 {
    margin-bottom: 1em;
}
.hi_footer .f_link {
    padding: 0;
    margin: 0;
    list-style: none;
}
.hi_footer .f_link .wh_link {
    color: #bbb;
    font-size: .9em;
}
.hi_footer .f_link .wh_link:hover {
    color: #a6d062;
    text-decoration: none;
}
.hi_footer .f_link.inline {
    text-align: center;
    margin-top: 1.5em;
}
.hi_footer .f_link.inline > li {
    display: inline-block;
    border-right: 1px solid #bbb;
    padding: 0 .65em;
}
.hi_footer .f_link.inline li:last-child {
    border-right: none;
}

.hi_footer .icon_link {
    text-align: center;
    margin-top: 1em;
}
.hi_footer .icon_link > a {
    display: inline-block;
    vertical-align: top;
    width: 2em;
    height: 2em;
    border-radius: 5em;
    background-color: #bbb;
    text-align: center;
    line-height: 2em;
    margin: .2em;
    color: #525252;
}
.hi_footer .icon_link > a .svg {
    fill: #525252;
    transition: all 0.2s ease-in-out;
}
.hi_footer .icon_link > a i {
    font-size: 1.3em;
    margin-top: .3em;
}
.hi_footer .icon_link > a .svg.blogger {
    margin-top: .4em;
    max-width: 65%;
}
.hi_footer .icon_link > a .svg.skype,
.hi_footer .icon_link > a .svg.line {
    margin-top: .3em;
    max-width: 75%;
}
.hi_footer .icon_link > a:hover {
    color: #2f70b8;
    background-color: #c0ddef;
}
.hi_footer .icon_link > a:hover .svg {
    fill: #2f70b8;
    transition: all 0.2s ease-in-out;
}

.hi_footer .bt_text {
    margin-top: 1.5em;
    font-size: .9em;
    text-align: center;
}



/*=========================================
                main
=========================================*/
.hi_main .hi_banner .edm_banner {
    display: block;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center center;
}

.hi_main .hi_banner .carousel-control-next,
.hi_main .hi_banner .carousel-control-prev {
    width: 10%;
    max-width: 100px;
    opacity: .5;
}
.hi_main .hi_banner .carousel-control-next:hover,
.hi_main .hi_banner .carousel-control-prev:hover {
    opacity: 1;
}

.hi_main .hi_se_tit {
    text-align: center;
    margin-bottom: 1em;
}

.hi_main .hi_rect_link {
    display: inline-block;
    text-transform: uppercase;
    padding: .5em 2.5em;
    border-radius: .2em;
    background-color: #88ccdc;
    color: #fff;
    letter-spacing: .2em;
    margin-top: 1em;
}
.hi_main .hi_rect_link:hover {
    text-decoration: none;
    background-color: #5b9aab;
}

.hi_main .hi_breadcrumb {
    background-color: #2f70b8;
}
.hi_main .hi_breadcrumb .breadcrumb {
    margin-bottom: 0;
    background-color: transparent;
}
.hi_main .hi_breadcrumb .breadcrumb li > a {
    color: #93c1dd;
}
.hi_main .hi_breadcrumb .breadcrumb li > a:hover {
    color: #c0e1e8;
    text-decoration: none;
}
.hi_main .hi_breadcrumb .breadcrumb-item.active {
    color: #fff;
}


.hi_main .hi_pagination .pagination {
    justify-content: center;
}









/* 五大優勢 */
.hi_main .hi_index_001 {
    background-color: #c0e1e8;
    padding-bottom: 2em;
}
.hi_main .hi_index_001 > ul {
    text-align: center;
    padding: 0;
}
.hi_main .hi_index_001 > ul > li {
    display: inline-block;
    margin: 15px 50px 2em 15px;
    max-width: 300px;
    padding: 3em 1.5em;
    background-color: #fff;
    border: 5px solid #ec5558;
    position: relative;
    vertical-align: top;
}
.hi_main .hi_index_001 > ul > li:before {
    content: "";
    width: 129px;
    height: 103px;
    position: absolute;
    top: -20px;
    right: -40px;
}
.hi_main .hi_index_001 > ul > li:nth-child(1):before {
    background-image: url(../images/hitutor_18_icon.png);
    background-image: -webkit-image-set(
        url(../images/hitutor_18_icon.png) 1x,
        url(../images/hitutor_18_icon@2x.png) 2x);
}
.hi_main .hi_index_001 > ul > li:nth-child(2):before {
    background-image: url(../images/hitutor_19_icon.png);
    background-image: -webkit-image-set(
        url(../images/hitutor_19_icon.png) 1x,
        url(../images/hitutor_19_icon@2x.png) 2x);
}
.hi_main .hi_index_001 > ul > li:nth-child(3):before {
    background-image: url(../images/hitutor_20_icon.png);
    background-image: -webkit-image-set(
        url(../images/hitutor_20_icon.png) 1x,
        url(../images/hitutor_20_icon@2x.png) 2x);
}
.hi_main .hi_index_001 > ul > li:nth-child(4):before {
    background-image: url(../images/hitutor_21_icon.png);
    background-image: -webkit-image-set(
        url(../images/hitutor_21_icon.png) 1x,
        url(../images/hitutor_21_icon@2x.png) 2x);
}
.hi_main .hi_index_001 > ul > li:nth-child(5):before {
    background-image: url(../images/hitutor_22_icon.png);
    background-image: -webkit-image-set(
        url(../images/hitutor_22_icon.png) 1x,
        url(../images/hitutor_22_icon@2x.png) 2x);
}
.hi_main .hi_index_001 > ul > li > h5,
.hi_main .hi_index_001 > ul > li > p {
    color: #ec5558;
}
.hi_main .hi_index_001 > ul > li > h5 {
    text-align: left;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.4em;
    line-height: 1.4em;
}
.hi_main .hi_index_001 > ul > li > p {
    margin-bottom: 0;
    height: 140px;
}


/* 最新消息 */
.hi_main .hi_index_002 {
    background-color: #eef4fb;
    padding-bottom: 2em;
}
.hi_main .hi_index_002 .news_link_box {
    max-width: 800px;
    margin: 0 auto;
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 1.1em;
}
.hi_main .hi_index_002 .news_link_box .news_link {
    list-style: none;
    padding: 0;
}
.hi_main .hi_index_002 .news_link_box .news_link > li {
    padding: .2em .5em;
    margin-bottom: .5em;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
}
.hi_main .hi_index_002 .news_link_box .news_link > li > .tit {
    margin-right: .5em;
    font-weight: bold;
}
.hi_main .hi_index_002 .news_link_box .news_link > li > .tit.blue {
    color: #458ead;
}
.hi_main .hi_index_002 .news_link_box .news_link > li > .tit.red {
    color: #a72a2c;;
}
.hi_main .hi_index_002 .news_link_box .news_link > li > a {
    color: #6d6d6d;
}
.hi_main .hi_index_002 .news_link_box .news_link > li > a:hover {
    color: #0072c1;
    text-decoration: none;
}

/* 課程總覽 */
.hi_main .hi_index_003 {
    margin-bottom: 2em;
}
.hi_main .hi_index_003 .cus_box {
    border: 5px solid rgba(104, 142, 211, 0.6);
    vertical-align: top;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
}
.hi_main .hi_index_003 .cus_box > img {
    width: 100%;
}
.hi_main .hi_index_003 .cus_box .wd {
    display: inline-block;
    text-align: right;
    width: 100%;
    padding: .5em;
}
.hi_main .hi_index_003 .cus_box .wd > h5,
.hi_main .hi_index_003 .cus_box .wd  > p {
    text-align: left;
}
.hi_main .hi_index_003 .cus_box .wd > h5 {
    font-weight: bold;
}
.hi_main .hi_index_003 .cus_box .wd > a {
    display: inline-block;
    background-color: #71b2c6;
    color: #fff;
    padding: 0 1em;
    border-radius: 5em;
}
.hi_main .hi_index_003 .cus_box .wd > a:hover {
    background-color: #5b9aab;
    text-decoration: none;
}

/* 專業師資 */
.hi_main .hi_index_004 {
    padding-bottom: 2em;
    background: url(../images/teach_back.jpg) top left repeat;
}
.hi_main .hi_index_004 .teacher_list {
    max-width: 1800px;
    margin: 0 auto;
    padding-right: 40px;
    padding-left: 40px;
    position: relative;
}
.hi_main .hi_index_004 .teacher_list .tea_box {
    max-width: 224px;
    margin: 0 auto;
    border: 2px solid rgba(255,255,255,0.75);
}
.hi_main .hi_index_004 .teacher_list .tea_box .tea_wd {
    background-color: rgba(255,255,255,0.75);
    color: #404040;
    padding: .5em;
    text-align: center;
}
.hi_main .hi_index_004 .teacher_list .tea_box .tea_wd .tea_name {
    display: block;
    font-size: 1.4em;
}
.hi_main .hi_index_004 .teacher_list .tea_box .tea_wd .tea_name + span {
    font-size: .9em;
}
.hi_main .hi_index_004 .teacher_list .owl-nav .owl-prev,
.hi_main .hi_index_004 .teacher_list .owl-nav .owl-next {
    position: absolute;
    top: 40%;
    height: 30px;
    width: 30px;
    border-radius: 5em;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.25em;
    background: rgba(0, 0, 0, 0.2);
    color: #eee;
    transition: all 0.2s ease-in-out;
}
.hi_main .hi_index_004 .teacher_list .owl-nav .owl-prev {
    left: 10px;
}
.hi_main .hi_index_004 .teacher_list .owl-nav .owl-next {
    right: 10px;
}
.hi_main .hi_index_004 .teacher_list .owl-nav .owl-prev:hover,
.hi_main .hi_index_004 .teacher_list .owl-nav .owl-next:hover {
    background: #fff;
    color: #666;
    transition: all 0.2s ease-in-out;
}
.hi_main .hi_index_004 .teacher_list .owl-dots .owl-dot span {
    background: rgba(0, 0, 0, 0.2);
}
.hi_main .hi_index_004 .teacher_list .owl-dots .owl-dot.active span {
    background: rgba(0, 0, 0, 0.5);
}


/* 學員主打星 */
.hi_main .hi_index_005 {
    padding-bottom: 2em;
    background-color: #c0e1e8;
}
.hi_main .hi_index_005 .stu_box {
    text-align: right;
    margin-bottom: 2em;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 1em;
    border-bottom: 1px solid #fff;
    max-width: 300px;
}
.hi_main .hi_index_005 .stu_box img {
    width: 100%;
    margin-bottom: 1em;
}
.hi_main .hi_index_005 .stu_box h5,
.hi_main .hi_index_005 .stu_box p {
    text-align: left;
}
.hi_main .hi_index_005 .stu_box h5 {
    font-weight: bold;
    border-left: 5px solid #476a80;
    padding-left: .6em;
    padding-top: .2em;
    padding-bottom: .2em;
    color: #476a80;
}
.hi_main .hi_index_005 .stu_box p {
    color: #404040;
}
.hi_main .hi_index_005 .stu_box a {
    display: inline-block;
    background-color: #fff;
    color: #476a80;
    padding: 0 1em;
    border-radius: 5em;
}
.hi_main .hi_index_005 .stu_box a:hover {
    text-decoration: none;
    background-color: #71b2c6;
    color: #fff;
}


/* 熱門影片 */
.hi_main .hi_index_006 {
    padding-bottom: 2em;
}
.hi_main .hi_index_006 .video_box {
    margin-right: 1rem;
    margin-left: 1rem;
}
.hi_main .hi_index_006 .video_box .yb_mt {
    margin-bottom: 2em;
}

/* 學習補給站 */
.hi_main .hi_index_007 {
    padding-bottom: 2em;
    background-color: #eef4fb;
}
.hi_main .hi_index_007 .learn_box {
    width: 100%;
    height: 260px;
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden;
    margin-bottom: 2em;
}
.hi_main .hi_index_007 .learn_box .wd {
    background-color: rgba(0,0,0,0.5);
}
.hi_main .hi_index_007 .learn_box .wd {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(0,0,0,0.35);
    padding: .5em 1em;
    color: #fff;
    transition: all 0.2s ease-in-out;
}
.hi_main .hi_index_007 .learn_box .wd > span {
    display: inline-block;
    vertical-align: middle;
}
.hi_main .hi_index_007 .learn_box .wd .tit {
    font-size: 1.5em;
    width: 120px;
    font-weight: bold;
}
.hi_main .hi_index_007 .learn_box .wd .tit + span {
    width: calc(100% - 125px);
}
.hi_main .hi_index_007 .learn_box:hover .wd {
    background-color: rgba(0,0,0,0.8);
    transition: all 0.2s ease-in-out;
}
.hi_main .hi_index_007 .learn_box .wd > span > p {
    display: block;
    margin-bottom: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 合作企業 */
.hi_main .hi_index_008 {
    padding-bottom: 2em;
    background-color: #c0e1e8;
}
.hi_main .hi_index_008 .bx-wrapper {
    margin: 0 auto;
}



/* --------------------------------------------------
breaking-news
--------------------------------------------------*/
.hi_main .hi_breaking_news_001 {
    background-color: #eef4fb;
    padding-bottom: 2em;
}
.hi_main .hi_breaking_news_001 .newspage_list {
	margin: 0 15px 2em 20px;
	padding: 100px 0 30px 0;
	border-left: 3px solid rgba(0,0,0,0.1);
	position: relative;
}
.hi_main .hi_breaking_news_001 .newspage_list ul {
    padding-left: 20px;
    list-style: none;
    font-size: 1.1em;
}
.hi_main .hi_breaking_news_001 .newspage_list ul li {
	position: relative;
    padding: .2em .5em;
    margin-bottom: .5em;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
}
.hi_main .hi_breaking_news_001 .newspage_list ul li:before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 2em;
	position: absolute;
	left: -26px;
	top: .6em;
}
.hi_main .hi_breaking_news_001 .newspage_list ul > li > a {
	color: #6d6d6d;
}
.hi_main .hi_breaking_news_001 .newspage_list ul > li > a:hover {
	color: #0072c1;
    text-decoration: none;
}
.hi_main .hi_breaking_news_001 .newspage_list ul > li > .time {
    display: block;
    font-weight: bold;
    font-size: .85em;
    margin-bottom: .2em;
}
.hi_main .hi_breaking_news_001 .n_tabLink {
	text-align: center;
	position: absolute;
	top: 0;
	width: 100%;
}
.hi_main .hi_breaking_news_001 .n_tabLink a {
	display: inline-block;
	vertical-align: top;
	padding: 1em 0 .5em 0;
	margin: 0 2%;
	width: 25%;
	border-radius: .5em;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
    background-color: #fff;
}
.hi_main .hi_breaking_news_001 .n_tabLink a:hover {
    padding-top: 1.5em;
    text-decoration: none;
}
.hi_main .hi_breaking_news_001 .n_tabLink a.all {
	background-color: #a67c37;
}
.hi_main .hi_breaking_news_001 .n_tabLink a.active {
	color: #a67c37;
	border: 1px solid #a67c37;
	border-top-width: 0;
}
.hi_main .hi_breaking_news_001 .n_tabLink a.all.active {
	color: #a67c37;
	border-color: #a67c37;
    background-color: #fff;
}
.hi_main .hi_breaking_news_001 .newspage_list .tit {
    margin-right: .5em;
    font-weight: bold; 
}
.hi_main .hi_breaking_news_001 .newspage_list .tit.red {
    color: #a72a2c;
}
.hi_main .hi_breaking_news_001 .newspage_list ul li.annc:before,
.hi_main .hi_breaking_news_001 .n_tabLink a.annc {
	background-color: #a72a2c;
}
.hi_main .hi_breaking_news_001 .n_tabLink a.annc.active {
	color: #a72a2c;
    border-color: #a72a2c;
    background-color: #fff;
}
.hi_main .hi_breaking_news_001 .newspage_list .tit.blue {
    color: #458ead;
}
.hi_main .hi_breaking_news_001 .newspage_list ul li.event:before,
.hi_main .hi_breaking_news_001 .n_tabLink a.event {
	background-color: #458ead;
}
.hi_main .hi_breaking_news_001 .n_tabLink a.event.active {
	color: #458ead;
	border-color: #458ead;
    background-color: #fff;
}
.hi_main .hi_breaking_news_001 .hi_pagination .pagination .page-link {
    background-color: #88ccdc;
    color: #fff;
    border-color: #fff;
}
.hi_main .hi_breaking_news_001 .hi_pagination .pagination .page-link:hover,
.hi_main .hi_breaking_news_001 .hi_pagination .pagination .page-item.active .page-link {
    background-color: #5b9aab;
}


/* --------------------------------------------------
testimony
--------------------------------------------------*/
.hi_main .hi_testimony_001 {
    padding-bottom: 2em;
    padding-top: 2em;
    background-color: #c0e1e8;
}
.hi_main .hi_testimony_001 .nav-pills {
    justify-content:center;
}
.hi_main .hi_testimony_001 .nav-pills .nav-link {
    background-color: #2c576a;
    color: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid #fff;
    border-bottom-width: 0;
    font-weight: bold;
}
.hi_main .hi_testimony_001 .nav-pills .nav-link:hover {
    background-color: #568da5;
}
.hi_main .hi_testimony_001 .nav-pills .nav-link.active,
.hi_main .hi_testimony_001 .nav-pills .show>.nav-link {
    background-color: #fff;
    color: #2c576a;
}
.hi_main .hi_testimony_001 .tab-content {
    border-top: 1px solid #fff;
    padding-top: 2em;
}
.hi_main .hi_testimony_001 .stu_box {
    text-align: right;
    margin-bottom: 2em;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 1em;
    border-bottom: 1px solid #fff;
    max-width: 300px;
}
.hi_main .hi_testimony_001 .stu_box img {
    width: 100%;
    margin-bottom: 1em;
}
.hi_main .hi_testimony_001 .stu_box h5,
.hi_main .hi_testimony_001 .stu_box p {
    text-align: left;
}
.hi_main .hi_testimony_001 .stu_box h5 {
    font-weight: bold;
    border-left: 5px solid #476a80;
    padding-left: .6em;
    padding-top: .2em;
    padding-bottom: .2em;
    color: #476a80;
}
.hi_main .hi_testimony_001 .stu_box p {
    color: #404040;
}
.hi_main .hi_testimony_001 .stu_box a {
    display: inline-block;
    background-color: #fff;
    color: #476a80;
    padding: 0 1em;
    border-radius: 5em;
}
.hi_main .hi_testimony_001 .stu_box a:hover {
    text-decoration: none;
    background-color: #71b2c6;
    color: #fff;
}
.hi_main .hi_testimony_001 .hi_pagination .pagination .page-link {
    background-color: #fff;
    color: #476a80;
    border-color: #fff;
}
.hi_main .hi_testimony_001 .hi_pagination .pagination .page-link:hover,
.hi_main .hi_testimony_001 .hi_pagination .pagination .page-item.active .page-link {
    color: #fff;
    background-color: #71b2c6;
}
.hi_popup_student .modal-content{
    border: 4px solid #88ccdc;
}
.hi_popup_student .modal-content .modal-header .modal-title{
    color: #476a80;
    font-weight: bold;
    font-size: 1.5em;
}
.hi_popup_student .modal-content .modal-header{
    border-bottom:1px dashed #88ccdc;
}
.hi_popup_student .modal-content .modal-header .close {
    color: #458ead;
}
.hi_popup_student .modal-content .modal-body img{
    width: 100%;
}
.hi_popup_student .modal-content .modal-body p{
    padding-top: 1em; 
}
.hi_popup_student .modal-content .modal-footer {
    justify-content: center;
    border: none;
}
.hi_popup_student .modal-content .modal-footer .btn {
    border: 1px solid #88ccdc;
    background-color: transparent;
    border-radius: .2em;
    color: #88ccdc;
    padding: .2em 1em;
}
.hi_popup_student .modal-content .modal-footer .btn:hover {
    background-color: #458ead;
    color: #fff;
}



/* --------------------------------------------------
feature
--------------------------------------------------*/
.hi_main .hi_feature_001 {
    padding-bottom: 2em;
    background-color: #eeeeee;
}
.hi_main .hi_feature_001 .imgBox {
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    display: none;
}
.hi_main .hi_feature_001 .imgBox img {
    display: inline-block;
    width: 100%;
    max-width: 1215px;
}
.hi_main .hi_feature_001 > ul {
    text-align: center;
    padding: 0;
}
.hi_main .hi_feature_001 > ul > li {
    margin: 0 .5em;
    text-align: center;
}
.hi_main .hi_feature_001 > ul > li img {
    width: 100%;
    max-width: 768px;
    display: inline-block
}
.hi_main .hi_feature_001 > ul > li p {
    margin-bottom: 0;
}

.hi_main .hi_feature_002 {
    padding-bottom: 2em;
    background: url(../images/study_25.png) center center no-repeat;
    background-size: cover;
}
.hi_main .hi_feature_002 .imgBox {
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
}
.hi_main .hi_feature_002 .imgBox img {
    display: inline-block;
    width: 100%;
    max-width: 1097px;
}

.hi_main .hi_feature_003 {
    padding-bottom: 2em;
}
.hi_main .hi_feature_003 .feature_trail > div {
    text-align: center;
    margin-bottom: 2em;
}
.hi_main .hi_feature_003 .feature_trail > div > img {
    width: 100%;
    max-width: 527px;
    display: inline-block;
}

.hi_main .hi_feature_004 {
    background-color: #eee;
    padding-bottom: 2em;
}
.hi_main .hi_feature_004 .txtImg {
    text-align: center;
}
.hi_main .hi_feature_004 .txtImg img {
    width: 100%;
    max-width: 450px;
    display: inline-block;
}
.hi_main .hi_feature_004 .txtImg .hi_f_btn {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 2em;
}
.hi_main .hi_feature_004 .txtImg .hi_f_btn .hi_rect_link {
    background-color: #0c9ea5;
}
.hi_main .hi_feature_004 .txtImg .hi_f_btn .hi_rect_link:hover {
    background-color: #40c3ca;
}

.hi_main .hi_feature_005 {
    background-color: #f4eae0;
    padding-bottom: 2em;
}
.hi_main .hi_feature_005 .imgBox,
.hi_main .hi_feature_005 .imgBox + div {
    text-align: center;
    padding-right: 15px;
    padding-left: 15px;
}
.hi_main .hi_feature_005 .imgBox {
    display: none;
}
.hi_main .hi_feature_005 .imgBox img,
.hi_main .hi_feature_005 .imgBox + div img {
    display: inline-block;
    width: 100%;
}
.hi_main .hi_feature_005 .imgBox img {
    max-width: 852px;
}
.hi_main .hi_feature_005 .imgBox + div img {
    max-width: 768px;
    border: 2px solid #927869;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}


/* --------------------------------------------------
about-us
--------------------------------------------------*/
.hi_main .hi_about_us_001 {
    background-color: #eeeeee;
    position: relative;
}
.hi_main .hi_about_us_001 .imgBox,
.hi_main .hi_about_us_001 .imgBox + div {
    text-align: center;
}
.hi_main .hi_about_us_001 .imgBox {
    display: none;
    margin-right: 15px;
    margin-left: 15px;
}
.hi_main .hi_about_us_001 .imgBox img,
.hi_main .hi_about_us_001 .imgBox + div img {
    width: 100%;
    display: inline-block;
}
.hi_main .hi_about_us_001 .imgBox img {
    max-width: 1413px;
}
.hi_main .hi_about_us_001 .imgBox + div img {
    max-width: 768px;
}

.hi_main .hi_about_us_002 .timeline_wrapper > div {
	position: relative;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time {
	display: inline-block;
	width: calc(20% - 20px);
	height: 80px;
	position: absolute;
	left: 0;
	margin-top: -40px;
	margin-right: -.1em;
	padding-left: 15px;
	color: #fff;
	line-height: 80px;
	font-family: 'Roboto Slab', serif;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: .1em;
	text-align: right;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 40px 0 40px 30px;
	border-color: transparent transparent transparent #007bff;
	position: absolute;
	top: 0;
	right: -30px;
	z-index: -1;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.red,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.red + .l_txt:after,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.red + .l_txt .f_date {
	background-color: #eb5244;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.red:before {
	border-color: transparent transparent transparent #eb5244;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.blue,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.blue + .l_txt:after,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.blue + .l_txt .f_date {
	background-color: #99c7d1;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.blue:before {
	border-color: transparent transparent transparent #99c7d1;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.yellow,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.yellow + .l_txt:after,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.yellow + .l_txt .f_date {
	background-color: #fcae28;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.yellow:before {
	border-color: transparent transparent transparent #fcae28;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.deepblue,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.deepblue + .l_txt:after,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.deepblue + .l_txt .f_date {
	background-color: #083552;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.deepblue:before {
	border-color: transparent transparent transparent #083552;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time span {
	display: inline-block;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt {
	margin-left: 30%;
	padding: 30px 15px;
	border-left: 3px solid #6d6e71;
	position: relative;
	text-align: right;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt:after {
	content: "";
	width: 16px;
	height: 16px;
	transform: rotate(45deg);
	position: absolute;
	left: 0;
	margin-left: -10px;
	margin-top: -8px;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt:after {
	top: 35%;
}
.hi_main .hi_about_us_002 .timeline_wrapper > div.lg_bottom .l_txt {
	margin-bottom: 40px;
}
.hi_main .hi_about_us_002 .timeline_wrapper > div.lg_bottom .l_txt:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 8px 0 8px;
	border-color: #6d6e71 transparent transparent transparent;

	position: absolute;
	bottom: -10px;
	left: -10px;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt p {
	margin-bottom: 0;
	margin-left: 15px;
	padding-bottom: 20px;
	border-bottom: 3px solid #6d6e71;
	text-align: left;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .h_tit {
	font-size: 1.2em;
    font-weight: bold;
    display: block;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .f_date {
    display: none;
    color: #fff;
    text-align: center;
    margin-bottom: 1em;
    padding-top: .2em;
    padding-bottom: .2em;
    font-family: 'Roboto Slab', serif;
    font-size: 1.2em;
    font-weight: bold;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt > span {
	display: inline-block;
	margin-top: 10px;
	width: 135px;
	height: 37px;
	background: url(../images/about_icon_pic001.png) top right no-repeat;
	background-size: 50%;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .ic_hitutor {
	background-position: right 0;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .ic_house {
	background-position: right -37px;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .ic_people {
	background-position: right -74px;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .ic_line {
	background-position: right -111px;
}



.hi_main .hi_about_us_003,
.hi_main .hi_about_us_004 {
    background-color: #93bec0;
    position: relative;
}
.hi_main .hi_about_us_003 .imgBox,
.hi_main .hi_about_us_004 .imgBox {
    display: none;
}
.hi_main .hi_about_us_003 .imgBox,
.hi_main .hi_about_us_003 .imgBox + div,
.hi_main .hi_about_us_004 .imgBox,
.hi_main .hi_about_us_004 .imgBox + div {
    text-align: center
}
.hi_main .hi_about_us_003 .imgBox img,
.hi_main .hi_about_us_003 .imgBox + div img,
.hi_main .hi_about_us_004 .imgBox img,
.hi_main .hi_about_us_004 .imgBox + div img {
    display: inline-block;
    width: 100%;
}
.hi_main .hi_about_us_003 .imgBox img,
.hi_main .hi_about_us_004 .imgBox img {
    max-width: 1920px;
}
.hi_main .hi_about_us_004 .imgBox + div img {
    max-width: 422px;
    margin-bottom: 2em;
}
.hi_main .hi_about_us_003 .imgBox + div p,
.hi_main .hi_about_us_003 .imgBox + div h4,
.hi_main .hi_about_us_004 .imgBox + div p,
.hi_main .hi_about_us_004 .imgBox + div h4 {
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
}
.hi_main .hi_about_us_003 .imgBox + div p,
.hi_main .hi_about_us_004 .imgBox + div p  {
    margin-top: 2em;
    margin-bottom: 0;
    padding-bottom: 2em;
    font-size: 1.1em;
}
.hi_main .hi_about_us_003 .imgBox + div h4,
.hi_main .hi_about_us_004 .imgBox + div h4 {
    font-weight: bold;
}
.hi_main .hi_about_us_004 .imgBox + div p {
    color: #fff;
}



.hi_main .hi_about_us_005 {
    padding-bottom: 4em;
    background-color: #e0bdb1;
}
.hi_main .hi_about_us_005 .imgBox {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}
.hi_main .hi_about_us_005 .imgBox h4 {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 1em;
}
.hi_main .hi_about_us_005 .imgBox p {
    font-size: 1.1em;
    max-width: 600px;
    margin: 0 auto 2em auto;
}
.hi_main .hi_about_us_005 .imgBox img {
    width: 100%;
    max-width: 1181px;
}
.hi_main .hi_about_us_005 .imgBox .hi_rect_link {
    background-color: #68acaf;
}
.hi_main .hi_about_us_005 .imgBox .hi_rect_link:hover {
    background-color: #93bec0;
}


.hi_main .hi_about_us_006 {
    padding-bottom: 2em;
}
.hi_main .hi_about_us_006 .reported_news {
    text-align: center;
    margin-bottom: 2em;
}
.hi_main .hi_about_us_006 .reported_news .h_wd p,
.hi_main .hi_about_us_006 .reported_news .h_wd h2 {
    text-align: left;
}
.hi_main .hi_about_us_006 .reported_news > img {
    margin-bottom: 1em;
}
.hi_main .hi_about_us_006 .h_wd p {
    margin-bottom: .5em;
}
.hi_main .hi_about_us_006 .h_wd h2 {
    font-size: 1.4em;
}
.hi_main .hi_about_us_006 .reported_news > img,
.hi_main .hi_about_us_006 .reported_news_list ul li img  {
    width: 100%;
    max-width: 544px;
}
.hi_main .hi_about_us_006 .reported_news_list > ul {
    list-style: none;
    padding-left: 0;
    padding-bottom: 1em;
    margin-bottom: 1em;
    border-bottom: 1px dashed #d2d2d2;
}
.hi_main .hi_about_us_006 .reported_news_list > ul > li {
    display: inline-block;
    vertical-align: top;
}
.hi_main .hi_about_us_006 .reported_news_list > ul > li:first-child {
    width: 120px;
}
.hi_main .hi_about_us_006 .reported_news_list > ul > li:last-child {
    width: calc(100% - 140px);
    margin-left: 15px;
}
.hi_main .hi_about_us_006 .reported_news_list > ul > li > p {
    font-size: 0.9em;
    margin-bottom: .5em;
}
.hi_main .hi_about_us_006 .reported_news_list > ul > li > h2 {
    font-size: 1.1em;
    margin-bottom: 0;
}

.hi_main .hi_about_us_006 .h_wd p,
.hi_main .hi_about_us_006 .reported_news_list > ul > li > p {
    color: #6d6d6d;
}
.hi_main .hi_about_us_006 .h_wd h2,
.hi_main .hi_about_us_006 .reported_news_list > ul > li > h2 {
    font-weight: bold;
}
.hi_main .hi_about_us_006 .h_wd h2 > a,
.hi_main .hi_about_us_006 .reported_news_list > ul > li > h2 > a {
    color: #0072c1;
}


/* --------------------------------------------------
reported
--------------------------------------------------*/
.hi_main .hi_about_us_006 .hi_pagination {
    margin-top: 2em;
}
.hi_main .hi_about_us_006 .hi_pagination .pagination .page-link {
    background-color: #fff;
    color: #0072c1;
    border-color: #0072c1;
}
.hi_main .hi_about_us_006 .hi_pagination .pagination .page-link:hover,
.hi_main .hi_about_us_006 .hi_pagination .pagination .page-item.active .page-link {
    background-color: #c0e1e8;
}



/* --------------------------------------------------
sitemap
--------------------------------------------------*/
.hi_main .hi_sitemap_001 {
    padding-top: 2em;
    padding-bottom: 2em;
    background-color: #eee;
}
.hi_main .hi_sitemap_001 .st_map .tit {
    display: block;
    background-color: #ffb9b7;
    margin-bottom: 1em;
    padding-top: .5em;
    padding-bottom: .5em;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
}
.hi_main .hi_sitemap_001 .st_map .tit:hover {
    background-color: #ff8480;
    text-decoration: none;
}
.hi_main .hi_sitemap_001 .st_map ul {
    list-style: none;
    padding: 0;
}
.hi_main .hi_sitemap_001 .st_map ul li {
    text-align: center;
    margin-bottom: 1em;
}
.hi_main .hi_sitemap_001 .st_map ul li.plink_line {
    height: 2px;
    background-color: #ffb9b7;
}
.hi_main .hi_sitemap_001 .st_map ul li a {
    color: #6d6d6d;
    font-size: 1.1em;
}
.hi_main .hi_sitemap_001 .st_map ul li a:hover {
    text-decoration: none;
    color: #0072c1;
}


/* --------------------------------------------------
Information Center
--------------------------------------------------*/
.hi_main .hi_information_center {
    background-color: #eeeeee;
    padding-bottom: 2em;
}
.hi_main .hi_information_center .nav-pills {
    padding-top: 2em;
    padding-bottom: 2em;
}
.hi_main .hi_information_center .nav-pills .nav-item {
    width: 100%;
    margin-bottom: 1em;
}
.hi_main .hi_information_center .nav-pills .nav-item .nav-link {
    border: 2px solid #7d7d7d;
    border-radius: 2rem;
    color: #7d7d7d;
    text-align: center;
    font-weight: bold;
    padding-right: 1em;
    padding-left: 1em;
}
.hi_main .hi_information_center .nav-pills .nav-item .nav-link:hover,
.hi_main .hi_information_center .nav-pills .nav-item .nav-link.active {
    background-color:#7d7d7d; 
    color: #ffffff;
}
.hi_main .hi_information_center .item-content{
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    margin-bottom:1em; 
    padding: 1em;
    text-align: right;
    transition: all 0.2s ease-in-out;
}
.hi_main .hi_information_center .item-content:hover {
    box-shadow: 0px 1px 8px rgba(200,200,200,.6);
    background-color: #ffffff;
}
.hi_main .hi_information_center .item-content img{
    width: 100%;
    margin-bottom: 1em;
}
.hi_main .hi_information_center .item-content a {
    display: inline-block;
    background-color: #d2d2d2;
    color: #fff;
    padding: 0 1em;
    border-radius: 5em;
}
.hi_main .hi_information_center .item-content a:hover {
    background-color: #5b9aab;
    text-decoration: none;
}
.hi_main .hi_information_center .item-content h3,
.hi_main .hi_information_center .item-content p {
    text-align: left;
}
.hi_main .hi_information_center .item-content h3 {
    font-size: 1.4em;
    font-weight: bold;
}
.hi_main .hi_information_center nav > ul{
    margin-bottom: 0px;
    padding: 15px;
}
.hi_main .hi_information_center .pagination .page-item .page-link{
    background-color: #d2d2d2;
    color: #ffffff;
}
.hi_main .hi_information_center .pagination .page-item.active .page-link{
    color:#999999;
    background-color: #f5f5f5;
    border-color:#ddd;
}
.hi_main .hi_information_center .pagination .page-item .page-link:hover{
    color: #000000;
    background-color: #fff;
}


/* --------------------------------------------------
guide
--------------------------------------------------*/
.hi_main .linelink {
    background-color: #efefef;
    border-bottom:2px solid #5b9aab; 
    text-align: center;
}
.hi_main .linelink > a {
    display: block;
    color: #5b9aab;
    font-size: 1.1em;
    font-weight: bold;
    padding: .5em 1em;
    color: #fff;
    background-color: #5b9aab;
}
.hi_main .linelink > a:hover,
.hi_main .linelink > a.active {
    color: #28697b;
    background-color: #ecc716;
    text-decoration: none;
}

/*上課流程*/
.hi_main .hi_guide_01 {
    background-color: #efefef;
    padding-top: 2em;
    padding-bottom: 2em;
}
.hi_main .hi_guide_01 .service_class_process .hi_se_tit_guide {
    width: 100%;
    height: 50px;
    margin-bottom: 1em;
    background: url(../images/guide/service_00.png) top center no-repeat;
}


.hi_main .hi_guide_01 .service_class_process .service_step {
    padding: 0;
    margin: 0 auto;
    max-width: 850px;
}
.hi_main .hi_guide_01 .service_class_process .service_step li{
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin-bottom: 20px;
    position: relative;
}
.hi_main .hi_guide_01 .service_class_process .service_step li:last-child{
    margin-bottom: 0;
}
.hi_main .hi_guide_01 .service_class_process .service_step li::before{
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 25px 0 25px;
    border-color: #ecc716 transparent transparent transparent;
    position: absolute;
    bottom: -20px;
    right: 25%;
    margin-right: -25px;
}
.hi_main .hi_guide_01 .service_class_process .service_step li:nth-child(3)::before{
    right: auto;
	left: 25%;
	margin-right: 0;
	margin-left: -25px;
}
.hi_main .hi_guide_01 .service_class_process .service_step li:last-child::before{
    display: none;
}
.hi_main .hi_guide_01 .service_class_process .service_step li img{
    width: 100%;
}
/*上課須知*/
.hi_main .hi_guide_02{
    background-color: #eef4fb;
}
.hi_main .hi_guide_02 .service_class_infor{
    padding: 0px 15px 30px;
}
.hi_main .hi_guide_02 .service_class_infor > div{
    margin-top: 3em;
    padding: 15px;
    border: 1px solid #f1a243;
    position: relative;
    background-color: #fff;
}
.hi_main .hi_guide_02 .service_class_infor > div.t_purple{
    border-color: #b69cbf;
}
.hi_main .hi_guide_02 .service_class_infor > div.t_grayRed{
    border-color: #8b6d6f;
}
.hi_main .hi_guide_02 .service_class_infor > div > h2 {
    display: inline-block;
	color: #f1a243;
	margin: 0;
	font-size: 1.2em;
	position: absolute;
    top: -1.2em; 
    font-weight: bold;
}
.hi_main .hi_guide_02 .service_class_infor > div.t_purple > h2{
    color: #b69cbf;
}
.hi_main .hi_guide_02 .service_class_infor > div.t_grayRed > h2{
    color: #8b6d6f;
}
.hi_main .hi_guide_02 .service_class_infor table{
    width: 100%;
    font-size: 0.9em;
}
.hi_main .hi_guide_02 .service_class_infor table a{
    color: #2f70b7;
}
.hi_main .hi_guide_02 .service_class_infor table a:hover{
    text-decoration: underline;
}
.hi_main .hi_guide_02 .service_class_infor table tr td{
    padding: 5px;
    border: 1px solid #5b9aab;
}
.hi_main .hi_guide_02 .service_class_infor table tr td:nth-last-child(2){
    background-color: #5b9aab;
    color: #ffffff;
    text-align: center;
} 
.hi_main .hi_guide_02 .service_class_infor table tr td:nth-last-child(2),
.hi_main .hi_guide_02 .service_class_infor table tr td + td{
    font-size: 1.1em;
}
.hi_main .hi_guide_02 .service_class_infor table ul{
    padding-left: 1.5em;
}
.hi_main .hi_guide_02 .service_class_infor table ul li{
    list-style-type:disc; 
}
/*課程準備建議*/
.hi_main .hi_guide_03 {
    padding-bottom: 2em;
}
.hi_main .hi_guide_03 .feature_img,
.hi_main .hi_guide_03 .feature_img + div {
    text-align: center;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 2em;
}
.hi_main .hi_guide_03 .feature_img {
    display: none;
}
.hi_main .hi_guide_03 .feature_img img,
.hi_main .hi_guide_03 .feature_img + div img {
    width: 100%;
    display: inline-block;
}
.hi_main .hi_guide_03 .feature_img img {
    max-width: 1063px;
}
.hi_main .hi_guide_03 .feature_img + div img {
    max-width: 332px;
}
/*英文課程級別概述*/
.hi_main .hi_guide_04 {
    background-color: #eeeeee;
    padding-bottom: 2em;
}
.hi_main .hi_guide_04 .guide_icons .row > div {
    text-align: center;
    margin-bottom: 2em;
}
.hi_main .hi_guide_04 .guide_icons a {
    display: inline-block;
    font-weight: bold;
    color: #565656;
    font-size: 1.1em;
}
.hi_main .hi_guide_04 .guide_icons a:hover {
    text-decoration: none;
    color: #2f70b7;
}
.hi_main .hi_guide_04 .guide_icons a:hover img {
    transform:translateY(-10px);
}
.hi_main .hi_guide_04 .guide_icons img {
    display: inline-block;
    width: 100%;
    max-width: 120px;
    margin-bottom: .5em;
    transition: all 0.2s ease-in-out;
}
.hi_main .hi_guide_04 .guide_icons img + span {
    display: block;
}

/*課程異動*/
.hi_main .hi_guide_05 {
    padding-bottom: 2em;
}
.hi_main .hi_guide_05 .service_class_transaction .listInfo_warpper > h2 {
    color: #003567;
    font-size: 1.2em;
    font-weight: bold;
}
.hi_main .hi_guide_05 .service_class_transaction .listInfo_warpper ul {
    display: table;
	color: #003567;
	margin-top: 15px;
	padding-left: 0;
	width: 100%
}
.hi_main .hi_guide_05 .service_class_transaction .listInfo_warpper ul li {
    display: table-cell;
    border: 1px solid #ecc716;
    vertical-align: middle;
    padding: 5px;
}
.hi_main .hi_guide_05 .service_class_transaction .listInfo_warpper ul li:first-child{
    background-color: #ecc716;
    border-radius: .5em;
    width: 30px;
    text-align: center;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-weight: bold;
}
.hi_main .hi_guide_05 .service_class_transaction .listInfo_warpper ul li:last-child {
    border-left-width: 0;
    padding-right: 15px;
    border-radius: .5em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}



/* --------------------------------------------------
service
--------------------------------------------------*/
.hi_main .hi_service_001,
.hi_main .hi_service_003 {
	background-color: #eee;
    padding-top: 2em;
	padding-bottom: 2em;
}
.hi_main .hi_service_001 .last_updated,
.hi_main .hi_service_002 .last_updated{
	text-align: right;
    margin-top: 2em;
	font-size: 14px;
	font-weight: bold;
}
.hi_main .hi_service_001 .sv_tit {
	width: 100%;
	height: 53px;
    margin-bottom: 2em;
	background: url(../images/service/serv_02_ti.png) top center no-repeat;
}
.hi_main .hi_service_001 .graylist_wrapper > ul {
	padding-left: 1em;
}
.hi_main .hi_service_001 .graylist_wrapper > ul > li {
    list-style-type:none;
	font-weight: bold;
}
.hi_main .hi_service_001 .graylist_wrapper > ul > li > p {
	font-weight: normal;
}
.hi_main .hi_service_002 {
	padding-top: 5em;
	padding-bottom: 5em;
}
.hi_main .hi_service_002 .container {
	border-top: 2px solid #5b9aab;
}
.hi_main .hi_service_002 .container .sv_tit {
	text-align: center;
}
.hi_main .hi_service_002 .container .sv_tit span {
	display: inline-block;
	transform: translateY(-1.5em);
}
.hi_main .hi_service_002 .wording_wrapper {
	padding: 30px 15px 0 15px;
}
.hi_main .hi_service_002 .wording_wrapper h3 {
	font-size: 1.2em;
}
.hi_main .hi_service_002 .wording_wrapper > h3, 
.hi_main .hi_service_002 .wording_wrapper > h3 + p {
	border: 2px solid #5b9aab;
	color: #5b9aab;
	font-weight: bold;
	border-radius: .3em;
	margin: 5px 0;
}
.hi_main .hi_service_002 .wording_wrapper > h3 {
	display: inline-block;
	padding-right: 15px;
}
.hi_main .hi_service_002 .wording_wrapper > h3 span {
	background-color: #5b9aab;
	display: inline-block;
	width: 40px;
	text-align: center;
	color: #fff;
	margin-right: 10px;
}
.hi_main .hi_service_002 .wording_wrapper > h3 + p {
	padding: 15px;
	margin-bottom: 20px;
}
.hi_main .hi_service_002 .wording_wrapper > ul {
	margin: 20px 0;
	padding-left: 1.5em;
}
.hi_main .hi_service_002 .wording_wrapper > ul li {
	list-style-type:disc;
	margin-bottom: 10px;
}
.hi_main .hi_service_002 .wording_wrapper .w_subtit {
	color: #ecc716;
	font-weight: bold;
	margin: 20px 0 0 0;
}
.hi_main .hi_service_002 .wording_wrapper .w_subtit + ul {
	margin-top: 10px;
}
.hi_main .hi_service_003 .sv_tit {
	width: 100%;
	height: 53px;
    margin-bottom: 1em;
	background: url(../images/service/stud_04.png) top center no-repeat;
}
.hi_main .hi_service_003 .bold {
	font-weight: bold;
}
.hi_main .hi_service_003 .i_black {
	color: #000;
}
.hi_main .hi_service_003 .st_mg4 {
	margin: 30px 15px;
	line-height: 2em;
}



/* --------------------------------------------------
pay
--------------------------------------------------*/
.hi_main .hi_pay_001 .fz-big {
	font-size: 1.2em;
}
.hi_main .hi_pay_001 .bold {
	font-weight: bold;
}
.hi_main .hi_pay_001 .i_red {
	color: #ea0000;
}
.hi_main .hi_pay_001 .i_black {
	color: #000;
}
.hi_main .hi_pay_001 .i_yellow {
	color: #ecc716;
}
.hi_main .hi_pay_001 .i_greentit {
	color: #5b9aab;
	font-weight: bold;
}
.hi_main .hi_pay_001 {
	background-color: #eee;
    padding-top: 2em;
	padding-bottom: 2em;
}
.hi_main .hi_pay_001 .pay_tit {
	width: 100%;
	height: 53px;
    margin-bottom: 2em;
	background: url(../images/pay/pay_1.png) top center no-repeat;
}
.hi_main .hi_pay_001 .nav {
	margin-bottom: 2em;
}
.hi_main .hi_pay_001 .nav .nav-link {
	background-color: #ecc716;
	border: 1px solid #ecc716;
	border-radius: 5em;
	box-shadow: 0px 2px 0px 2px #c8aa1b;
	margin-bottom: 1em;
	color: #fff;
	font-weight: bold;
}
.hi_main .hi_pay_001 .nav .nav-link.active,
.hi_main .hi_pay_001 .nav .nav-link:hover {
	background-color: #fff;
	color: #ecc716;
	box-shadow: 0px 2px 0px 2px #ecc716;
}
.hi_main .hi_pay_001 .nav .nav-link > span {
	display: inline-block;
	background-color: #fff;
	color: #ecc716;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	border-radius: 5em;
	margin-right: 1em;
    transition: all 0.2s ease-in-out;
}
.hi_main .hi_pay_001 .nav .nav-link.active > span,
.hi_main .hi_pay_001 .nav .nav-link:hover > span {
	color: #fff;
	background-color: #ecc716;
}
.hi_main .hi_pay_001 .payment_wrapper > div {
	margin-top: 30px;
	margin-bottom: 60px;
	margin-left: 17px;
	padding: 40px 15px 15px 15px;
	border: 2px solid #5b9aab;
	border-radius: .5em;
	background-color: #fff;
	position: relative;
	color: #6e6e6e;
}
.hi_main .hi_pay_001 .payment_wrapper > div h3 {
	display: inline-block;
	color: #5b9aab;
	font-size: 1.5em;
	font-weight: bold;
	position: absolute;
	top: -30px;
	left: 50px;
}
.hi_main .hi_pay_001 .payment_wrapper > div .long_img_w {
	width: 100%;
	max-width: 279px;
}
.hi_main .hi_pay_001 .payment_wrapper .topGreen {
	display: inline-block;
	padding: 0 10px;
	color: #fff;
	border-radius: .5em;
	font-size: .9em;
	transition: none;

	position: absolute;
	top: 1.3em;
	left: 5em;

	background: #9ad3ae; /* Old browsers */
	background: -moz-linear-gradient(top, #9ad3ae 0%, #9ad3ae 50%, #84c89a 51%, #84c89a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #9ad3ae 0%,#9ad3ae 50%,#84c89a 51%,#84c89a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #9ad3ae 0%,#9ad3ae 50%,#84c89a 51%,#84c89a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ad3ae', endColorstr='#84c89a',GradientType=0 ); /* IE6-9 */
}
.hi_main .hi_pay_001 .payment_wrapper .topGreen:hover {
	background: #84c89a;
	text-decoration: none;
}
.hi_main .hi_pay_001 .payment_wrapper > div p.tit,
.hi_main .hi_pay_001 .payment_wrapper > div p.tit + img {
	display: inline-block;
	vertical-align: middle;
}
.hi_main .hi_pay_001 .payment_wrapper > div p.tit {
	margin: 0;
	font-weight: bold;
	font-size: 1.1em;
}
.hi_main .hi_pay_001 .payment_wrapper > div p.tit + img,
.hi_main .hi_pay_001 .payment_wrapper > div img.p_icon {
	margin: 10px 0;
}
.hi_main .hi_pay_001 .payment_wrapper > div img.p_icon,
.hi_main .hi_pay_001 .payment_wrapper > div img.p_icon + p {
	display: inline-block;
	vertical-align: bottom;
}
.hi_main .hi_pay_001 .payment_wrapper > div img.p_icon + p {
	margin: 0 20px 10px 10px;
	font-weight: bold;
	color: #000;
}
.hi_main .hi_pay_001 .payment_wrapper table {
	width: 100%;
}
.hi_main .hi_pay_001 .payment_wrapper table tr td {
	vertical-align: top;
	padding: 5px 0;
}
.hi_main .hi_pay_001 .payment_wrapper table tr td:first-child {
	width: 60px;
	font-weight: bold;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon {
	display: inline-block;
	width: 58px;
	height:58px;
	background: url(../images/payment_icon_pic001.png) top left no-repeat;

	position: absolute;
	top: -30px;
	left: -20px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.creditcard {
	background-position: -116px 0px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.atm {
	background-position: -116px -58px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.webatm {
	background-position: -116px -116px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.bank {
	background-position: -116px -174px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.cash {
	background-position: -116px -232px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.paypal {
	background-position: -116px -290px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.oversea {
	background-position: -116px -348px;
}


/* --------------------------------------------------
courses-list
--------------------------------------------------*/
.hi_main .hi_courses_list_001 {
    position: relative;
    padding-top: 2em;
    padding-bottom: 2em;
    background-color: #f0f4f5;
}
.hi_main .hi_courses_list_001 .go_top {
    display: inline-block;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    height: 42px;
    width: 42px;
    text-align: center;
    padding-top: .2em;

    position: fixed;
    right: .5em;
    bottom: 1em;
    z-index: 2;
    opacity: 0;
}
.hi_main .hi_courses_list_001 .go_top:hover {
    background-color: #4680ea;
}
.hi_main .hi_courses_list_001 .go_top.show {
    animation: an_btn_show 1s forwards;
}
@keyframes an_btn_show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.hi_main .hi_courses_list_001 .go_top.hide {
    animation: an_btn_hide 1s forwards;
}
@keyframes an_btn_hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.hi_main .hi_courses_list_001 .courses_nav {
    margin-bottom: 4em;
}
.hi_main .hi_courses_list_001 .courses_nav > a {
    position: relative;
    display: block;
    color: #fff;
    padding: .5em 1em;
    text-align: center;
    opacity: 0.75;
}
.hi_main .hi_courses_list_001 .courses_nav > a.active,
.hi_main .hi_courses_list_001 .courses_nav > a:hover {
    text-decoration: none;
    opacity: 1;
}
.hi_main .hi_courses_list_001 .courses_nav > a > span {
    position: absolute;
    right: 1em;
}
.hi_main .hi_courses_list_001 .courses_nav > a {
    margin-top: .5em;
}
.hi_main .hi_courses_list_001 .courses_nav > a:first-child {
    margin-top: 0;
}
.hi_main .hi_courses_list_001 .courses_nav > ul {
    list-style: none;
    padding: 0;
    background-color: #fff;
}
.hi_main .hi_courses_list_001 .courses_nav > ul > li {
    border-bottom: 1px dashed #ccc;
}
.hi_main .hi_courses_list_001 .courses_nav > ul > li > a {
    display: block;
    text-align: center;
    color: #404040;
    padding: .5em 1em;
}
.hi_main .hi_courses_list_001 .courses_nav > ul > li > a.active,
.hi_main .hi_courses_list_001 .courses_nav > ul > li > a:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.1);
}

.hi_main .hi_courses_list_001 .courses_nav + div > h2 {
    border-bottom: 2px solid rgba(104, 142, 211, 0.6);
    font-size: 1.6em;
    font-weight: bold;
    padding-bottom: .2em;
    margin-bottom: 1em;
    color:rgba(104, 142, 211, 1);
}
.hi_main .hi_courses_list_001 .courses_item {
    border-bottom: 5px solid #1bb5cf;
    background-color: #fff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin-bottom: 2em;
}
.hi_main .hi_courses_list_001 .courses_item .tit {
    display: inline-block;
    color: #fff;
    background-color: #1bb5cf;
    padding: .2em .5em;
    font-size: .8em;
    font-weight: bold;
    margin-bottom: 1em;
}
.hi_main .hi_courses_list_001 .courses_item .tit + a {
    float: right;
    color: #f3ced2;
    margin: .3em .8em;
}
.hi_main .hi_courses_list_001 .courses_item .tit + a:hover,
.hi_main .hi_courses_list_001 .courses_item .tit + a.active {
    color: #f34f62;
}
.hi_main .hi_courses_list_001 .courses_item h3 {
    font-size: 1.6em;
    color: #1bb5cf;
    font-weight: bold;
    border-bottom: 1px dashed #ccc;
    padding-bottom: .5em;
    margin-bottom: 0;
}
.hi_main .hi_courses_list_001 .courses_item h3 .red {
    color: #eb5244;
}
.hi_main .hi_courses_list_001 .courses_item .c_list {
    color: #6d6d6d;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px dashed #ccc;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    text-align: center;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul:after {
    content: "+";
    display: inline-block;
    line-height: 1em;
    font-size: 1.8em;
    color: #ccc;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul:last-child:after {
    display: none;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul li:first-child {
    font-size: 1.05em;
    font-weight: bold;
    margin-bottom: .3em;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul li:first-child span {
    color: #aaa;
    margin-right: .5em;
    margin-left: .5em;
    font-weight: normal;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul li:last-child {
    font-size: .9em;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul li:last-child .ch {
    color: #fff;
    background-color: #63d2e5;
    padding-right: .5em;
    padding-left: .5em;
    border-radius: 5em;
    margin-right: .5em;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul li:last-child .t_green {
    color: #83c617;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul li:last-child .t_orange {
    color: #fcae28;
}
.hi_main .hi_courses_list_001 .courses_item .c_price {
    padding-top: 1em;
    text-align: right;
}
.hi_main .hi_courses_list_001 .courses_item .c_price > p {
    margin-bottom: 0;
    font-size: 1.2em;
    color: #ea0000;
    font-weight: bold;
}
.hi_main .hi_courses_list_001 .courses_item .c_price > p > span {
    font-size: 1.2em;
}
.hi_main .hi_courses_list_001 .courses_item .c_price > p + span {
    display: block;
    text-decoration: line-through;
    color: #ccc;
}
.hi_main .hi_courses_list_001 .courses_item .c_price .buy_btn {
    display: block;
    color: #fff;
    background-color: #f1a243;
    text-align: center;
    padding: .5em 1em;
    margin-top: 1em;
    font-weight: bold;
}
.hi_main .hi_courses_list_001 .courses_item .c_price .buy_btn i {
    margin-right: .5em;
}
.hi_main .hi_courses_list_001 .courses_item .c_price .buy_btn:hover {
    text-decoration: none;
    background-color: #fccb28;
}
.hi_main .hi_courses_list_001 .courses_item h3,
.hi_main .hi_courses_list_001 .courses_item .c_list,
.hi_main .hi_courses_list_001 .courses_item .c_price > p,
.hi_main .hi_courses_list_001 .courses_item .c_price > p + span {
    padding-left: .5em;
    padding-right: .5em;    
}





/* --------------------------------------------------
hi_course_001
--------------------------------------------------*/
.hi_main .hi_course_001 {
    padding-top: 3em;
    padding-bottom: 3em;
    background-color: #f0f4f5;
}
.hi_main .course_tit_01 {
    display: inline-block;
    background-color: #ec9585;
    line-height: .9em;
    transform: translate(.3em, .3em);
}
.hi_main .course_tit_01 h1 {
    display: inline-block;
    margin: 0;
    font-weight: bold;
    transform: translate(-.3em, -.2em);
    line-height: .9em;
}
.hi_main .course_tit_01 + .tit_img_line {
    display: block;
    height: 3px;
    background-color: #ec9585;
    margin-top: 1em;
    margin-bottom: 3em;
}
.hi_main .hi_course_001 .tit_img {
    text-align: center;
    margin-bottom: 3em;
}
.hi_main .hi_course_001 .tit_img img {
    width: 100%;
    max-width: 326px;
}
.hi_main .hi_course_001 .course_link {
    display: block;
    padding: .5em 1em;
    color: #fff;
    background-color: #55b4d7;
    text-align: center;
    margin-bottom: 3em;
}
.hi_main .hi_course_001 .course_link:hover {
    background-color: #2e94ba;
    text-decoration: none;
}
.hi_main .hi_course_001 .course_list h4 {
    color: #ec9585;
    font-weight: bold;
    font-size: 1.3em;
}
.hi_main .hi_course_001 .course_list > ul {
    list-style: none;
    font-size: 1.2em;
    padding: 0;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 2em;
}
.hi_main .hi_course_001 .course_list > ul > li {
    position: relative;
    padding-left: 50px;
    margin-bottom: .5em;
}
.hi_main .hi_course_001 .course_list > ul > li:before {
    content: "";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-radius: 10px;
    background-color: #465093;
    position: absolute;
    left: 20px;
    top: 10px;
}

.hi_main .hi_course_002 {
    padding-top: 3em;
    padding-bottom: 3em;
}
.hi_main .hi_course_002 .level_box {
    display: table;
    margin-bottom: 1em;
    border: 1px solid #688ed3;
    width: 100%;
}
.hi_main .hi_course_002 .level_box > ul {
    display: table-row;
}
.hi_main .hi_course_002 .level_box > ul > li {
    display: table-cell;
    vertical-align: top;
    padding: .5em;
}
.hi_main .hi_course_002 .level_box > ul > li:first-child {
    color: #fff;
    background-color: #688ed3;
    border-bottom: 1px dashed #fff;
    font-weight: bold;
    width: 100px;
}
.hi_main .hi_course_002 .level_box > ul > li:last-child {
    border-bottom: 1px dashed #688ed3;
    background-color: #fff;
}
.hi_main .hi_course_002 .level_box > ul:last-child > li:first-child,
.hi_main .hi_course_002 .level_box > ul:last-child > li:last-child {
    border-bottom: none;
}
.hi_main .course_tit_02 {
    font-size: 1.2em;
    border-bottom: 1px solid #465093;
    margin-bottom: 1em;
}
.hi_main .course_tit_02 + div {
    margin-bottom: 2em;
}
.hi_main .course_tit_02 span {
    display: inline-block;
    color: #fff;
    background-color: #465093;
    padding: .2em 1em;
}
.hi_main .course_tit_02.blue_noline {
    border-bottom: none;
}
.hi_main .course_tit_02.blue_noline span {
    background-color: #55b4d7;
}
.hi_main .hi_course_002 .nav-tabs {
    border: none;
}
.hi_main .hi_course_002 .nav-tabs .nav-link {
    background-color: #465093;
    color: #fff;
    border: none;
    border-radius: 0;
    margin-right: 2em;
    position: relative;
    font-weight: bold;
}
.hi_main .hi_course_002 .nav-tabs .nav-link:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 20px;
    border-color: transparent transparent transparent #465093;
    
    position: absolute;
    top: 0;
    right: -20px;
    transition: all 0.2s ease-in-out;
}
.hi_main .hi_course_002 .nav-tabs .nav-item {
    margin-bottom: 0;
}
.hi_main .hi_course_002 .nav-tabs .nav-item.show .nav-link,
.hi_main .hi_course_002 .nav-tabs .nav-link.active {
    border: none;
    background-color: #f2cd00;
    color: #465093;
}
.hi_main .hi_course_002 .nav-tabs .nav-item.show .nav-link:after,
.hi_main .hi_course_002 .nav-tabs .nav-link.active:after {
    border-color: transparent transparent transparent #f2cd00;
}
.hi_main .hi_course_002 .tab-content {
    margin-top: 1em;
    padding: 1em 1.5em;
    background-color: #fff9d2;
    border-radius: .5em;
}
.hi_main .hi_course_002 .price_table {
    border: 3px solid #ec9585;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 2em;
    position: relative;
}
.hi_main .hi_course_002 .price_table:before,
.hi_main .hi_course_002 .price_table:after {
    content: "";
    background-color: #fff;
    position: absolute;
    width: 90%;
    height: 3px;
    top: -3px;
    left: 5%;
}
.hi_main .hi_course_002 .price_table:after {
    top: auto;
    bottom: -3px;
}
.hi_main .hi_course_002 .price_table > table {
    width: 100%;
    max-width: 600px;
    text-align: center;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 auto;
}
.hi_main .hi_course_002 .price_table > table  th {
    background-color: #2e94ba;
}
.hi_main .hi_course_002 .price_table > table  td {
    background-color: #f5cf60;
}
.hi_main .hi_course_002 .price_table > table  tr th,
.hi_main .hi_course_002 .price_table > table  tr td {
    border: 2px solid #fff;
    padding: 1em;
}




/***********************************
            Courses
***********************************/

/*hi_courses_001*/
.hi_main .hi_courses_001 {
    background-color: #fbede2;
    padding-bottom: 3em;
}
.hi_main .hi_courses_001 .cus_box {
    border: 5px solid rgba(245,166,106,0.3);
    vertical-align: top;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
}
.hi_main .hi_courses_001 .cus_box > img {
    width: 100%;
}
.hi_main .hi_courses_001 .cus_box .wd {
    display: inline-block;
    text-align: right;
    width: 100%;
    padding: .5em;
}
.hi_main .hi_courses_001 .cus_box .wd > h5,
.hi_main .hi_courses_001 .cus_box .wd  > p {
    text-align: left;
}
.hi_main .hi_courses_001 .cus_box .wd > h5 {
    font-weight: bold;
}
.hi_main .hi_courses_001 .cus_box .wd > a {
    display: inline-block;
    background-color: #71b2c6;
    color: #fff;
    padding: 0 1em;
    border-radius: 5em;
}
.hi_main .hi_courses_001 .cus_box .wd > a:hover {
    background-color: #5b9aab;
    text-decoration: none;
}

/*hi_courses_002*/
.hi_main .hi_courses_002{
    padding-bottom: 3em;
}
.hi_main .hi_courses_002 .osu_set img{
    width: 100%;
    margin-bottom: 30px;
}
.hi_main .hi_courses_002 .osu_set .osu_set_1{
    text-align: right;
}
.hi_main .hi_courses_002 .osu_set .osu_set_1 h4,
.hi_main .hi_courses_002 .osu_set .osu_set_2 h4{
    color: #2f70b7;
    font-size: 1.5em;
    font-weight: 600;
}
.hi_main .hi_courses_002 .osu_set .osu_set_1 h4:hover,
.hi_main .hi_courses_002 .osu_set .osu_set_2 h4:hover{
    text-decoration: underline;
    cursor: pointer;
}
.hi_main .hi_courses_002 .osu_set .osu_set_1 p,
.hi_main .hi_courses_002 .osu_set .osu_set_2 p{
    font-size: 1.0em;
}

/*hi_courses_003*/
.hi_main .hi_courses_003 {
    background-color: #fbffe6;
    padding-bottom: 3em;
}
.hi_main .hi_courses_003 .courses_player{
    margin-left: 0px;
    border: 8px solid #0b949a;
}
.hi_main .hi_courses_003 .file_download {
    display: block;
    margin: 1em auto 2em auto;
    background-color: #0b949a;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 20px;
    color: #ffffff;
    border-radius: 4px;
    width: 80%;
    text-align: center;
}
.hi_main .hi_courses_003 .file_download:hover {
    text-decoration: none;
    background-color: #10bcc4;
}
.hi_main .hi_courses_003 .courses_img {
    text-align: center;
}
.hi_main .hi_courses_003 .courses_img img{
    width: 100%;
    max-width: 265px;
}

/*.hi_courses_004*/
.hi_main .hi_courses_004{
    padding-bottom: 3em;
}
.hi_main .hi_courses_004 .img {
    text-align: center;
}
.hi_main .hi_courses_004 .img img {
    width: 100%;
    max-width: 1174px;
}


/*************************************************
        Courses - Asia / Europe / English
*************************************************/
.hi_main .hi_courses{
    background-color: #eee;
    padding-top: 3em;
    padding-bottom: 3em;
}
.hi_main .hi_courses .cs_wrapper > div{
    padding: 2em 0;
    border-bottom: 1px solid #bfbfbf;
}
.hi_main .hi_courses .cs_wrapper > div:last-child {
    border-bottom: none;
}
.hi_main .hi_courses .cs_wrapper .cpic img{
    width: 105%;
    border: 10px solid #fff;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.hi_main .hi_courses .cs_wrapper .ctxt h2{
    width: calc(100% - 20px);
    font-size: 1.3em;
    font-weight: 600;
}
.hi_main .hi_courses .cs_wrapper .ctxt h2.cnclick{
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.hi_main .hi_courses .cs_wrapper .ctxt h2.cnclick:hover{
    color: #3a83c7;
}
.hi_main .hi_courses .cs_wrapper .ctxt h2,
.hi_main .hi_courses .cs_wrapper .ctxt a{
    display: inline-block;
    vertical-align: middle;
}
.hi_main .hi_courses .cs_wrapper .ctxt a{
    color: #666;
    margin-top: -15px;
}
.hi_main .hi_courses .cs_wrapper .ctxt > div{
    text-align: right;
}
.hi_main .hi_courses .cs_wrapper .ctxt p{
    margin-top: 1rem;
}
.hi_main .hi_courses .cs_wrapper .ctxt > div a {
    color: #fff;
    background-color: #71b2c6;
    display: inline-block;
    padding: .2em 1.5em;
    border-radius: 5em;
    font-size: .9em;
}
.hi_main .hi_courses .cs_wrapper .ctxt > div a:hover {
    color:#fff;
    text-decoration: none;
    background-color: #5b9aab;
}
.hi_main .hi_courses .cs_wrapper .linkList{
    list-style: none;
    display: none;
    margin-top: 2em;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink{
    vertical-align: middle;
    padding: 5px 1em;
    border-bottom: 1px solid #eee;
    background-color: #bfbfbf;
    color: #fff;
    cursor: pointer;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink:hover{
    background-color: #9d9d9d;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink > span {
    display: inline-block;
    width: calc(100% - 25px);
}
.hi_main .hi_courses .cs_wrapper .linkList .clink i{
    margin-left: 5px;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink > span,
.hi_main .hi_courses .cs_wrapper .linkList .clink i{
    vertical-align: middle;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink_in{
    display: none;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink_in a{
    display: block;
    padding: 5px;
    color: #bfbfbf;
    background-color: #fff;
    border-bottom: 1px solid #bfbfbf;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink_in a:hover{
    background-color: #eee;
    color: #595757;
    text-decoration: none;
}










.hi_main .hi_teachers_003 .st_heart {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
    color: #002145;
    font-size: 1.4em;
}
.hi_main .hi_teachers_003 .st_heart:hover {
	color: #003269;
}
.hi_main .hi_teachers_003 .st_heart.active {
	color: #ff88aa;
}
.hi_main .hi_teachers_003 .st_heart.brown {
	color: #766b59;
}
.hi_main .hi_teachers_003 .st_heart.brown:hover {
	color: #948670;
}
.hi_main .hi_teachers_003 .st_heart.brown.active {
	color: #ff1c3c;
}


/*--------------------------- Teacher ---------------------------*/
.hi_main .hi_teachers_001  {
	background-color: #f3cdba;
	padding-bottom: 3em;
}
.hi_main .hi_teachers_001 .tfeatures_wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul {
    text-align: center;
    margin-bottom: 2em;
    padding-left: 0;
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li {
	display: inline-block;
	vertical-align: middle;
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li:first-child {
	width: 131px;
	height: 122px;
	border-radius: .5em;
	background: #183d57 url(../images/teachers_icon.png) top left no-repeat;
	position: relative;
	z-index: 1;
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li.f1 {
	background-position: 0px 0px
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li.f2 {
	background-position: 0px -122px
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li.f3 {
	background-position: 0px -244px
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li.f4 {
	background-position: 0px -366px
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li.f5 {
	background-position: 0px -488px
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li.f6 {
	background-position: 0px -610px
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li.f7 {
	background-position: 0px -732px
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li:last-child {
	width: 50%;
	margin-left: -10px;
	padding: 20px;
	color: #183d57;
	font-weight: bold;
	font-size: 1.3em;
	text-align: left;
	background-color: #eee;
}
.hi_main .hi_teachers_002 {
    background-color: #ebc715;
    padding-bottom: 3em;
}
.hi_main .hi_teachers_002 .teachers_search label {
	display: block;
	background-color: #fff;
	color: #29546e;
	padding: 5px 10px;
	font-weight: bold;
	text-align: left;
}
.hi_main .hi_teachers_002 .teachers_search label + select,
.hi_main .hi_teachers_002 .teachers_search label + input[type=text] {
	width: 100%;
	background-color: transparent;
	border: 1px solid #fff;
	color: #000;
	border-radius: .5em;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.hi_main .hi_teachers_002 .teachers_search label + select:focus,
.hi_main .hi_teachers_002 .teachers_search label + input[type=text]:focus {
    outline:none;
}
.hi_main .hi_teachers_002 .teachers_search label + select {
	padding: 5px 10px 14px 10px;
}
.hi_main .hi_teachers_002 .teachers_search label + input[type=text] {
	padding: 10px 10px;
}
.hi_main .hi_teachers_002 .teachers_search label + input[type=text]::-webkit-input-placeholder {
	color: #888;
}


.hi_main .hi_teachers_002 .teachers_search .t_search {
	border: 1px solid #fff;
	background-color: #fff;
	color: #29546e;
	width: 100%;
	padding: 5px 10px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.hi_main .hi_teachers_002 .teachers_search .t_search:hover {
	background-color: transparent;
    color: #000;
    
} 
.hi_main .hi_teachers_002 .teachers_search .row > div {
	margin-bottom: 1em;
} 

.hi_main .hi_teachers_003 {
    background-color: #d1c0a5;
    padding-top: 3em;
    padding-bottom: 3em;
}
.hi_main .hi_teachers_003 .teachers_warpper > div {
    position: relative;
    margin-bottom: 2em;
    border-top: 1px solid #fff;
}

.hi_main .hi_teachers_003 .t_award {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url(../images/teacher_award.png) top left no-repeat;
	position: absolute;
	left: 15px;
	top: -8px;
}
.hi_main .hi_teachers_003 .t_award.gold {
	background-position: -120px 0px;
}

.hi_main .hi_teachers_003 .t_award.recommend {
	background-position: -120px -60px;
    left: 0px;
    top: 0;
}

.hi_main .hi_teachers_003 .t_point {
	display: inline-block;
	color: #fff;
	background-color: #f8d319;
	height: 2em;
	width: 2em;
	line-height: 2em;
	border-radius: 5em;
	text-align: center;
	margin-right: 45px;
}
.hi_main .hi_teachers_003 .t_point span {
	font-size: 1.2em;
}

.hi_main .hi_teachers_003 .t_star {
	display: inline-block;
	color: #766b59;
	margin-right: 10px;
}
.hi_main .hi_teachers_003 .t_star i.got {
	color: #f8d319;
}

.hi_main .hi_teachers_003 .teachers_warpper .t_top {
	position: relative;
	font-size: 1.4em;
	text-align: right;
	padding: 10px 0;
}

.hi_main .hi_teachers_003 .teachers_warpper .t_name {
	overflow: hidden;
    text-align: left;
    margin-bottom: 1em;
}
.hi_main .hi_teachers_003 .teachers_warpper .t_name h3 {
	font-size: 1.5em;
}

.hi_main .hi_teachers_003 .teachers_warpper .t_name h3 + div p,
.hi_main .hi_teachers_003 .teachers_warpper .t_name h3 + div img {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding: 0
}
.hi_main .hi_teachers_003 .teachers_warpper .t_name h3 + div p {
	font-weight: bold;
}
.hi_main .hi_teachers_003 .teachers_warpper .t_txt {
    margin-top: 1em;
	text-align: right;
}
.hi_main .hi_teachers_003 .teachers_warpper .t_txt table {
	text-align: left;
}
.hi_main .hi_teachers_003 .teachers_warpper .t_txt table tr td {
	padding-bottom: 5px;
	vertical-align: top;
}
.hi_main .hi_teachers_003 .teachers_warpper .t_txt table tr td:first-child {
	font-weight: bold;
	width: 120px;
}
.hi_main .hi_teachers_003 .teachers_warpper .t_txt > a {
	display: inline-block;
	background-color: #fff;
	border: 1px solid #fff;
	color: #4d372c;
	padding: .05em 2em;
	margin-top: 10px;
}
.hi_main .hi_teachers_003 .teachers_warpper .t_txt > a:hover {
	background-color: transparent;
    color: #000;
    text-decoration: none;
}
.hi_main .hi_teachers_003 .teachers_warpper .t_txt, .hi_teachers_003 .teachers_warpper .t_name {
	color: #4d372c;
}
.hi_main .hi_teachers_003 .teachers_warpper > div > img {
	display: block;
	width: 100%;
}


.hi_main .hi_teachers_003 .hi_pagination .pagination .page-link {
    background-color: #fff;
    color: #476a80;
    border-color: #fff;
}
.hi_main .hi_teachers_003 .hi_pagination .pagination .page-link:hover,
.hi_main .hi_teachers_003 .hi_pagination .pagination .page-item.active .page-link {
    color: #fff;
    background-color: #71b2c6;
}





.hi_main .hi_teachers_page_001 .st_heart {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #002145;
}
.hi_main .hi_teachers_page_001 .st_heart:hover {
	color: #003269;
}
.hi_main .hi_teachers_page_001 .st_heart.active {
	color: #ff88aa;
}
.hi_main .hi_teachers_page_001 .st_heart.brown {
	color: #766b59;
}
.hi_main .hi_teachers_page_001 .st_heart.brown:hover {
	color: #948670;
}
.hi_main .hi_teachers_page_001 .st_heart.brown.active {
	color: #ff1c3c;
}

/*--------------------------- Contain ---------------------------*/
.hi_main .hi_teachers_page_002 {
	background-color: #c1e1e9;
}
.hi_main .hi_teachers_page_002 .stu_box {
    text-align: right;
    margin-bottom: 4em;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 2em;
    border-bottom: 1px solid #fff;
    max-width: 300px;
}
.hi_main .hi_teachers_page_002 .stu_box img {
    width: 100%;
    margin-bottom: 1em;
}
.hi_main .hi_teachers_page_002 .stu_box h5,
.hi_main .hi_teachers_page_002 .stu_box p {
    text-align: left;
}
.hi_main .hi_teachers_page_002 .stu_box h5 {
    font-weight: bold;
    border-left: 5px solid #476a80;
    padding-left: .6em;
    padding-top: .2em;
    padding-bottom: .2em;
    color: #476a80;
}
.hi_main .hi_teachers_page_002 .stu_box p {
    color: #404040;
}
.hi_main .hi_teachers_page_002 .stu_box a {
    display: inline-block;
    background-color: #fff;
    color: #476a80;
    padding: 0 1em;
    border-radius: 5em;
}
.hi_main .hi_teachers_page_002 .stu_box a:hover {
    text-decoration: none;
    background-color: #71b2c6;
    color: #fff;
}

/*--------------------------- Teacher ---------------------------*/
.hi_main .hi_teachers_page_001 .t_award {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url(../images/teacher_award.png) top left no-repeat;
	position: absolute;
	left: 0;
	top: -8px;
}
.hi_main .hi_teachers_page_001 .t_award.gold {
	background-position: -120px 0px;
}

.hi_main .hi_teachers_page_001 .t_award.recommend {
	background-position: -120px -60px;
}

.hi_main .hi_teachers_page_001 .t_point {
	display: inline-block;
	color: #fff;
	background-color: #f8d319;
	height: 2em;
	width: 2em;
	line-height: 2em;
	border-radius: 5em;
	text-align: center;
	margin-right: 55px;
}
.hi_main .hi_teachers_page_001 .t_point span {
	font-size: 1.2em;
}

.hi_main .hi_teachers_page_001 .t_star {
	display: inline-block;
	color: #766b59;
	margin-right: 10px;
}
.hi_main .hi_teachers_page_001 .t_star i.got {
	color: #f8d319;
}

/*------------------- teachers_page.html -------------------*/
.hi_main .hi_teachers_page_001 {
    background-color: #d1c0a5;
    padding-bottom: 3em;
}
.hi_main .hi_teachers_page_001 .teachersPage {
	background-color: #d1c0a5;
	color: #4c362b;
	padding: 0 15px 15px;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top {
	margin-top: 40px;
	position: relative;
	text-align: center;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_award {
	left: auto;
	top: -20px;
	margin-left: -10px;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top > div {
    position: relative;
    text-align: left;
    margin-top: 2em;
}

.hi_main .hi_teachers_page_001 .teachersPage .tp_top .icon_group {
	font-size: 1.5em;
	position: relative;
	text-align: right;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top .icon_group .open_mp3 {
	color: #766b59;
	margin-right: 40px;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top .icon_group .open_mp3:hover {
	color: #948670;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top .icon_group .st_heart {
	right: 0px;
}

.hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_star {
	margin-top: 15px;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_point {
	margin-right: 0;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_star, .hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_point {
	font-size: 1.2em;
}

.hi_main .hi_teachers_page_001 .teachersPage .tp_top h3 {
	font-size: 1.5em;
	margin: 0;
}

.hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_info img, .hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_info p {
	display: inline-block;
	vertical-align: middle;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_info img {
	margin-right: 5px;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_info p {
	margin: 0;
}

.hi_main .hi_teachers_page_001 .teachersPage table {
	width: 100%;
	text-align: left;
}
.hi_main .hi_teachers_page_001 .teachersPage table tr {
	border-bottom: 1px dashed #fff;
}
.hi_main .hi_teachers_page_001 .teachersPage table tr td {
	padding: 15px 0;
}
.hi_main .hi_teachers_page_001 .teachersPage table tr td:first-child {
	width: 30%;
	font-weight: bold;
}
.hi_main .hi_teachers_page_001 .teachersPage p{
	display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}



.hi_main .hi_teachers_page_001 .hi_rect_link {
    background-color: #a36121;
}
.hi_main .hi_teachers_page_001 .hi_rect_link:hover {
    background-color: #c97828;
}




/* learning_page.html */
.hi_main .hi_learning_page_001 {
    margin-top: 2em;
    margin-bottom: 4em;
}
.hi_main .hi_learning_page_001 .learning_page_tit {
    font-weight: bold;
    color: #d6d432;
    border-left: 5px solid #e8e8e8;
    padding-left: .5em;
}
.hi_main .hi_learning_page_001 .sns_share_link {
    text-align: right;
    margin-bottom: 2em;
}
.hi_main .hi_learning_page_001 .sns_share_link > span {
    display: inline-block;
    vertical-align: middle;
}
.hi_main .hi_learning_page_001 .sns_share_link > a {
    margin-left: .5em;
    display: inline-block;
    vertical-align: middle;
}
.hi_main .hi_learning_page_001 .sns_share_link > a:hover {
    transform: translateY(-0.2em);
}
.hi_main .hi_learning_page_001 .sns_share_link a.i_fb {
    color: #3b5998;
}
.hi_main .hi_learning_page_001 .sns_share_link a.i_t {
    color: #00a0d1;
}
.hi_main .hi_learning_page_001 .sns_share_link a.i_g {
    color: #db4a39;
}
.hi_main .hi_learning_page_001 .page_img {
    text-align: center;
    padding-bottom: 2em;
    margin-bottom: 2em;
    margin-top: 1em;
    background: linear-gradient(transparent 85%, #e8e8e8 15%);
    
}
.hi_main .hi_learning_page_001 .page_img > span {
    position: relative;
    display: inline-block;
    margin: 0 15px;
}
.hi_main .hi_learning_page_001 .page_img > span:after {
    content: "";
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 100%;
    border: 3px solid #d6d432;
    top: -10px;
    left: -10px;
}
.hi_main .hi_learning_page_001 .page_img img {
    width: 100%;
    max-width: 680px;
}
.hi_main .hi_learning_page_001 .article {
    margin-bottom: 4em;
    padding-bottom: 1em;
    border-bottom: 3em solid #e8e8e8;
}
.hi_main .hi_learning_page_001 .page_nav_group > a {
    display: inline-block;
    width: 40%;
    text-align: center;
    border: 1px dashed #d6d432;
    padding: .5em 1em;
    color: #7d7b00;
}
.hi_main .hi_learning_page_001 .page_nav_group > a:hover {
    text-decoration: none;
    background-color: #d6d432;
}
.hi_main .hi_learning_page_001 .page_nav_group > a > span {
    display: block;
}
.hi_main .hi_learning_page_001 .page_nav_group > a > span.g {
    transition: all 0.2s ease-in-out;
    color: #d6d432;
}
.hi_main .hi_learning_page_001 .page_nav_group > a:hover > span.g {
    color: #fff;
}
.hi_main .hi_learning_page_001 .page_nav_group > a.prev {
    float: left;
}
.hi_main .hi_learning_page_001 .page_nav_group > a.next {
    float: right;
}


/* learning_list.html */
.hi_main .hi_learning_list_001 {
    margin-top: 2em;
    margin-bottom: 2em;
}
.hi_main .hi_learning_list_001 .nav-pills {
    justify-content: center;
    margin-bottom: 2em;
    padding-bottom: 3em;
    border-bottom: 1px dashed #e8e8e8;
}
.hi_main .hi_learning_list_001 .nav-pills .nav-link {
    display: inline-block;
    padding: .2em 1.5em 0 1.5em;
    margin: .4em;
    border-radius: 5em;
    border: 1px solid #7d7d7d;
    background-color: #eeeeee;
    color: #7d7d7d;
    font-size: 1.2em;
}
.hi_main .hi_learning_list_001 .nav-pills .nav-link:hover,
.hi_main .hi_learning_list_001 .nav-pills .nav-link.active, 
.hi_main .hi_learning_list_001 .nav-pills .show > .nav-link {
    border-radius: 5em;
    background-color: #7d7d7d;
    color: #fff;
}
.hi_main .hi_learning_list_001 .learning_list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hi_main .hi_learning_list_001 .learning_list li {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px dashed #e8e8e8;
}
.hi_main .hi_learning_list_001 .learning_list li .l_img {
    text-align: center;
    margin-bottom: 1em;
}
.hi_main .hi_learning_list_001 .learning_list li .l_img img {
    width: 100%;
    max-width: 240px;
}
.hi_main .hi_learning_list_001 .learning_list li .l_img + div > a,
.hi_main .hi_learning_list_001 .learning_list li .l_img + div  > p {
    text-align: left;
}
.hi_main .hi_learning_list_001 .learning_list li a.tit {
    display: inline-block;
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 0.5em;
    color: #d6d432;
}
.hi_main .hi_learning_list_001 .learning_list li a.l_btn {
    float: right;
    padding: .1em 1.5em;
    border-radius: 5em;
    color: #7d7b00;
    border: 1px solid #d6d432;
    font-size: .9em;
}
.hi_main .hi_learning_list_001 .learning_list li a.l_btn:hover {
    text-decoration: none;
    background-color: #d6d432;
}

.hi_main .hi_learning_list_001 .learning_list li:before,
.hi_main .hi_learning_list_001 .learning_list li:after {
    content: '';
    clear: both;
    display: block;
}


.hi_main .hi_learning_list_001 .hi_pagination .pagination .page-link {
    background-color: #fff;
    color: #7d7b00;
    border-color: #d6d432;
}
.hi_main .hi_learning_list_001 .hi_pagination .pagination .page-link:hover,
.hi_main .hi_learning_list_001 .hi_pagination .pagination .page-item.active .page-link {
    background-color: #d6d432;
}




/* Hannah 2018/07/05 Add Trial Page */
.trial_form_wp, .trial_wording_wp {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.trial_title_box {
    display: block;
    background: url(../images/trial/tit_001.svg) center center no-repeat;
    background-size: contain;
    max-width: 300px;
    color: #fff;
    font-weight: bold;
    font-size: 1.8em;
    padding: 1.5rem .5rem 1rem .5rem;
    text-align: center;
    margin: 0 auto 2rem auto;
}
.trial_title_box.set2 {
    background: url(../images/trial/tit_002.svg) center center no-repeat;
    background-size: contain;
}
.trial_wording_wp {
    background: #efefef;
    background-image:
        linear-gradient(#e6e8e7 1px, transparent 0),
        linear-gradient(90deg, #e6e8e7 1px, transparent 0);
    background-size: 10px 10px;
}
.trial_wording_wp .step_box {
    text-align: center;
}
.trial_wording_wp .step_box > img {
    width: 89.1px;
    height: 89.1px;
    display: block;
    margin: 1rem auto;
}
.trial_wording_wp .step_box > img.cs1 {
    transform: translateX(6px);
}
.trial_wording_wp .step_box > span {
    display: inline-block;
    color: #fff;
    border-radius: .3rem;
    background-color: #00a0e8;
    padding: 0 .6rem;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: .5rem;
}
.trial_wording_wp .step_box > p {
    font-size: 1.1em;
    margin-bottom: 0;
    font-weight: bold;
    color: #3e3a39;
}
.trial_wording_wp .step_box > p.blue {
    font-size: .9em;
    color: #2c66a4;
    margin-bottom: 1rem;
}
.trial_wording_wp .gray_text {
    color: #595757;
}
.trial_wording_wp .gray_text > ul {
    list-style-type:decimal;
}
.trial_wording_wp .gray_text > ul > li {
    margin-bottom: .5rem;
}
.trial_wording_wp .gray_text > ul > li > a:hover {
    color: #0056b3;
    text-decoration: none;
}
.trial_service_wp {
    margin-top: 1.5rem;
    text-align: center;
}
.trial_service_wp > a {
    display: inline-block;
    margin: .5rem 1rem;
    color: #595757;
    font-weight: bold;
    font-size: 1.1em;
}
.trial_service_wp > a > img {
    margin-right: .5rem;
}
.trial_service_wp > a:hover {
    color: #00a0e8;
    text-decoration: none;
}
.hi_main .hi_statement .img_statement {
    margin: 35px 15px;
    text-align: center;
}
.hi_main .hi_statement .img_statement img {
    max-width: 100%;
}


/*---------------------------------------------------------------*/

@media (min-width: 576px) {
.hi_main .hi_banner .edm_banner {
    height: 500px;
}


/*=========================================
                main
=========================================*/
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time {
    font-size: 1.8em;
} 
.hi_main .hi_information_center .nav-pills .nav-item {
    display: inline-block;
    width: calc(49.5% - 10px);
    margin-right: 5px;
    margin-left: 5px;
}
.hi_main .hi_information_center .item{
    padding-right: 5px;
    padding-left: 5px;
}
.hi_main .hi_service_002 .container {
    border: 2px solid #5b9aab;
}

.hi_main .hi_courses_003 .file_download {
    font-size: 18px;
}
.hi_main .hi_courses .cs_wrapper .ctxt > div{
    padding-top: 25px;
}
.hi_main .top_title{
    font-size: 1.8em;
}


.hi_main .hi_index_001 > ul > li > p {
    height: 100px;
}



/*=========================================
                Trail
=========================================*/

.trial_wording_wp .step_box > p {
    font-size: 1.4em;
}
.trial_wording_wp .step_box > p.blue {
    font-size: 1.1em;
}
.trial_service_wp {
    text-align: left;
}
.trial_service_wp > a {
    margin: 0 2rem;
}


}
@media (min-width: 768px) {
/*=========================================
                footer
=========================================*/
.hi_footer .logo_box .logo {
    padding-right: 1em;
}
.hi_footer .logo_box .logo + div {
    display: inline-block;
    margin-top: 0; 
    text-align: left;
    padding-left: 1em;
}



/*=========================================
                main
=========================================*/
.hi_main .hi_index_007 .learn_box {
    height: 360px;
}
.hi_main .hi_feature_001 .imgBox {
    display: block;
}
.hi_main .hi_feature_001 .imgBox + ul {
    display: none;
}
.hi_main .hi_feature_005 .imgBox {
    display: block;
}
.hi_main .hi_feature_005 .imgBox + div {
    display: none;
}
.hi_main .hi_about_us_001 .imgBox {
    display: block;
}
.hi_main .hi_about_us_001 .imgBox + div {
    display: none;
}


.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt > span {
    width: 135px;
    height: 74px;
    background-size: 100%;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .ic_hitutor {
    background-position: right 0;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .ic_house {
    background-position: right -74px;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .ic_people {
    background-position: right -148px;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .ic_line {
    background-position: right -222px;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time,
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt:after {
    top: 30%;
}


.hi_main .linelink {
    padding-top: 2em;
}
.hi_main .linelink > a {
    display: inline-block;
    width: 30%;
    max-width: 240px;
    margin-right: .5em;
    margin-left: .5em;
    font-size: 1.2em;
}
.hi_main .hi_information_center .nav-pills .nav-item {
    display: inline-block;
    width: calc(24.5% - 10px);
    max-width: 160px;
    margin-right: 5px;
    margin-left: 5px;
}
.hi_main .hi_guide_01 .service_class_process .service_step li{
    width: 49%;
    float: left;
    padding: 0 40px;
}
.hi_main .hi_guide_01 .service_class_process .service_step li:nth-child(2),
.hi_main .hi_guide_01 .service_class_process .service_step li:nth-child(3){
    float: right;
}
.hi_main .hi_guide_01 .service_class_process .service_step li:first-child::before{
    border-width: 25px 0 25px 20px;
    border-color: transparent transparent transparent #ecc716;
    right: 20px;
    bottom: auto;
    top: 50%;
    margin-right: 0;		
    margin-top: -20px;
}
.hi_main .hi_guide_01 .service_class_process .service_step li:nth-child(3)::before{
    border-width: 25px 20px 25px 0;
    border-color: transparent #ecc716 transparent transparent;
    left: calc(3.7% + 40px);
    right: auto;
    bottom: auto;
    top: 50%;
    margin-right: 0;		
    margin-top: -20px;
}
.hi_main .hi_guide_02 .service_class_infor table{
    font-size: 1em;
}


.hi_main .hi_courses_list_001 .courses_nav {
    position: absolute;
    width: 200px;
}
.hi_main .hi_courses_list_001 .courses_nav + div {
    margin-left: 230px;
}



.hi_main .hi_courses_002 .osu_set .osu_set_1,
.hi_main .hi_courses_002 .osu_set .osu_set_2{
    padding-top: 25px;
}
.hi_main .hi_courses_002 .osu_set .osu_set_1 h4,
.hi_main .hi_courses_002 .osu_set .osu_set_2 h4{
    font-size: 1.2em;
}
.hi_main .hi_courses_003 .file_download {
    font-size: 23px;
}

.hi_main .hi_courses .cs_wrapper .linkList .clink{
    background-color: #3a83c7;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-bottom: none;

    pointer-events: none;
    cursor: default;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink i{
    display: none;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink_in{
    display: block;
    text-align: center;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink_in a{
    background-color: transparent;
    border-bottom: none;
    color: #707070;
}
.hi_main .hi_courses .cs_wrapper .linkList .clink_in a:hover{
    color: #3a83c7;
}


.hi_main .hi_teachers_001 .tfeatures_wrapper ul li:last-child {
    width: 30%;
}
.hi_main .hi_teachers_002 .teachers_search ul {
    text-align: center;
}
.hi_main .hi_teachers_002 .teachers_search ul li {
    width: 49%;
}
.hi_main .hi_teachers_003 .teachers_warpper > div {
    width: 49%;
    padding: 0 15px;
}


.hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_info p {
    font-size: 1.2em;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top h3 {
    font-size: 3em;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_star, .hi_main .hi_teachers_page_001 .teachersPage .tp_top .t_point {
    font-size: 2em;
}
.hi_main .hi_teachers_page_001 .teachersPage table tr td:first-child {
    width: 15%;
}


.hi_main .hi_teachers_page_001 .teachersPage .tp_top > img,
.hi_main .hi_teachers_page_001 .teachersPage .tp_top > div {
	display: inline-block;
	vertical-align: top;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top > img {
	width: 39%;
	max-width: 252px;
	max-height: 338px;
}
.hi_main .hi_teachers_page_001 .teachersPage .tp_top > div {
	width: 59%;
	/*padding-left: 20px;*/
	max-width: 500px;
}


.hi_main .hi_learning_list_001 .learning_list li .l_img,
.hi_main .hi_learning_list_001 .learning_list li .l_img + div {
    display: inline-block;
    vertical-align: top;
}
.hi_main .hi_learning_list_001 .learning_list li .l_img {
    margin-bottom: 0;
}
.hi_main .hi_learning_list_001 .learning_list li .l_img + div {
    width: calc(100% - 265px);
    margin-left: 15px;
}



}
@media (min-width: 992px) {

/*=========================================
                header
=========================================*/
.hi_header .navbar .logo {
    width: 140px;
}
.hi_header .navbar .top_group_box {
    position: absolute;
    top: 10px;
    right: 1rem;
}
.hi_header .navbar-collapse .navbar_box {
    position: absolute;
    top: 5px;
    right: 110px;
}
.hi_header .navbar-collapse .navbar_box > a {
    width: auto;
    background-color: transparent;
    color: #366cb4;
	font-weight:600;
    margin-right: .5em;
    margin-left: .5em;
}
.hi_header .navbar-collapse .navbar_box > a:hover {
    background-color: transparent;
    color: #83c617;
}
.hi_header .navbar-collapse .navbar-nav {
    margin-left: auto;
    margin-right: 1rem;
    background-color: transparent;
    padding-top: 2em;
    padding-bottom: 0;
}
.hi_header .navbar-collapse .navbar-nav .nav-item .nav-link  {
    letter-spacing: 0;
    overflow: hidden;
    margin-left: .5em;
}
.hi_header .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    color: #999;
}
.hi_header .navbar-collapse .navbar-nav .nav-item .nav-link:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 0px;
    left: 0;
    bottom: 0;
    background-color: #93c1dd;
    transition: all 0.2s ease-in-out;
}
.hi_header .navbar-collapse .navbar-nav .nav-item .nav-link:hover:after {
    width: 100%;
    height: 3px;
    left: 0;
}


/*=========================================
                footer
=========================================*/
.hi_footer .logo_box {
    margin-top: 2em;
    margin-bottom: 3em;
}
.hi_footer .logo_box .logo {
    display: inline-block;
    width: 200px;
}
.hi_footer .logo_box .logo + div {
    font-size: 1.2em;
}
.hi_footer .f_link_box h6 {
    font-size: 1.1em;
}
.hi_footer .f_link > li {
    margin-bottom: .5em;
}
.hi_footer .f_link .wh_link {
    font-size: 1em;
}
.hi_footer .icon_link {
    font-size: 1.2em;
}
.hi_footer .icon_link > a {
    margin: .2em .5em;
}
.hi_footer .bt_text {
    font-size: 1em;
}



/*=========================================
                main
=========================================*/
.hi_main .hi_se_tit {
    text-align: right;
    margin-right: 50px;
}
.hi_main .hi_index_002 .news_link {
    font-size: 1.2em;
}

.hi_main .hi_index_007 .large_wd .learn_box {
    height: 540px;
}
.hi_main .hi_index_007 .large_wd .learn_box .wd .tit {
    font-size: 2em;
    width: 160px;
}
.hi_main .hi_index_007 .large_wd .learn_box .wd .tit + span {
    width: calc(100% - 165px);
}
.hi_main .hi_index_007 .learn_box {
    height: 254px;
}
.hi_main .hi_index_007 .learn_box .wd > span > p {
    white-space: normal;
}
.hi_main .hi_breaking_news_001 .newspage_list {
    font-size: 1.2em;
}
.hi_main .hi_testimony_001 .nav-pills .nav-link {
    font-size: 1.2em;
    padding: .5rem 2rem;
}


.hi_main .hi_about_us_002 .timeline_wrapper {
    max-width: 960px;
    text-align: center;
    margin: 0 auto;
}
.hi_main .hi_about_us_002 .timeline_wrapper > div {
    float: left;
    width: 25%;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time {    
    height: 60px;
    line-height: 60px;
    width: 120px;
    top: 0;
    margin-top: 0;
    margin-right: 0;
    padding-left: 0;
    position: relative;
    text-align: center;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time:before {
    border-width: 50px 60px 0 60px;
    border-color: #007bff transparent transparent transparent;
    top: 100%;
    right: 0;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.red:before {
	border-color: #eb5244 transparent transparent transparent;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.blue:before {
	border-color: #99c7d1 transparent transparent transparent;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.yellow:before {
	border-color: #fcae28 transparent transparent transparent;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_time.deepblue:before {
	border-color: #083552 transparent transparent transparent;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt {
    margin-left: 0;
    margin-top: 6em;
    padding-top: 3em;
    border-left: none;
    border-top: 3px solid #6d6e71;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt:after {   
    left: 50%;
    top: -1px;
    margin-left: -8px;
}
.hi_main .hi_about_us_002 .timeline_wrapper > div.lg_bottom .l_txt:before {   
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent #6d6e71;
    left: auto;
    bottom: auto;
    right: -10px;
    top: -9px;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt p {
	min-height: 19em;
}
.hi_main .hi_about_us_002 .timeline_wrapper div .l_txt .f_date {
    display: block;
}


.hi_main .hi_about_us_001 .hi_se_tit,
.hi_main .hi_about_us_003 .hi_se_tit,
.hi_main .hi_about_us_004 .hi_se_tit {
    position: absolute;
    right: 0;
}
.hi_main .hi_about_us_003 .imgBox,
.hi_main .hi_about_us_004 .imgBox {
    display: block;
}
.hi_main .hi_about_us_003 .imgBox + div,
.hi_main .hi_about_us_004 .imgBox + div {
    display: none;
}
.hi_main .hi_about_us_004 .pv_box {
    position: absolute;
    width: 40%;
    top: 25%;
    right: 8%;
}


.hi_main .hi_about_us_006 .h_wd p {
    font-size: 1.1em;
    margin-bottom: .5em;
}
.hi_main .hi_about_us_006 .h_wd h2 {
    font-size: 1.6em;
}
.hi_main .hi_about_us_006 .reported_news_list > ul > li > p {
    font-size: 1em;
}
.hi_main .hi_about_us_006 .reported_news_list > ul > li > h2 {
    font-size: 1.2em;
}


.hi_main .linelink > a {
    margin-right: 1em;
    margin-left: 1em;
    font-size: 1.3em;
}
.hi_main .hi_guide_03 .feature_img {
    display: block;
}
.hi_main .hi_guide_03 .feature_img + div {
    display: none;
}


.hi_main .hi_pay_001 .payment_wrapper > div {
    margin-top: 40px;
    margin-bottom: 90px;
    margin-left: 40px;
    padding-top: 85px;
}
.hi_main .hi_pay_001 .payment_wrapper > div h3 {
    left: 90px;
    font-size: 1.6em;
}
.hi_main .hi_pay_001 .payment_wrapper .topGreen {
    left: 6em;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon {
    width: 116px;
    height: 116px;
    top: -40px;
    left: -40px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.creditcard {
    background-position: 0px 0px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.atm {
    background-position: 0px -116px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.webatm {
    background-position: 0px -232px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.bank {
    background-position: 0px -348px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.cash {
    background-position: 0px -464px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.paypal {
    background-position: 0px -580px;
}
.hi_main .hi_pay_001 .payment_wrapper .topicon.oversea {
    background-position: 0px -696px;
}

.hi_main .hi_courses_list_001 .courses_item .c_list,
.hi_main .hi_courses_list_001 .courses_item .c_price {
    display: inline-block;
    vertical-align: middle;
}
.hi_main .hi_courses_list_001 .courses_item .c_list {
    width: calc(100% - 215px);
    border-bottom: none;
    border-right: 1px dashed #ccc;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0;
    padding-bottom: 0;
}
.hi_main .hi_courses_list_001 .courses_item .c_price {
    width: 200px;
    text-align: center;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding-right: 3em;
    margin-bottom: 1.2em;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul:last-child {
    padding-right: 0;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul:after {
    position: absolute;
    right: .5em;
    top: .2em;
}
.hi_main .hi_courses_list_001 .courses_item .c_list ul li:first-child {
    border-bottom: 1px solid #b6f4ff;
}
.hi_main .hi_courses_list_001 .courses_item .c_price {
    padding-left: .5em;
    padding-right: .5em;
    padding-bottom: 1em;
}
.hi_main .hi_courses_list_001 .courses_item .c_price > p,
.hi_main .hi_courses_list_001 .courses_item .c_price > p + span {
    padding-left: 0;
    padding-right: 0;    
}
.hi_main .hi_courses_list_001 .courses_item .c_price .buy_btn {
    display: inline-block;
    padding: .5em 2em;
}



.hi_main .hi_course_001 .course_link {
    float: right;
    padding: .5em 2em;
}


.hi_main .hi_courses_001 .courses{
    padding: 0 25px 30px;
}
.hi_main .hi_courses_002 .osu_set .osu_set_1,
.hi_main .hi_courses_002 .osu_set .osu_set_2{
    padding-top: 15px;
}
.hi_main .hi_courses_002 .osu_set .osu_set_1 h4,
.hi_main .hi_courses_002 .osu_set .osu_set_2 h4{
    font-size: 1.3em;
}
.hi_main .hi_courses .cs_wrapper .ctxt h2{
    font-size: 1.8em;
    padding: 10px;
}
.hi_main .hi_courses .cs_wrapper .ctxt p{
    font-size: 1.1em;
    padding: 10px;
}
.hi_main .hi_courses .cs_wrapper .ctxt > div{
    padding-top: 15px;
}

.hi_main .hi_teachers_003 .teachers_warpper > div {
    width: 33%;
    padding: 0 30px;
}

.hi_main .hi_teachers_001  {
	background-color: #f3cdba;
    padding-bottom: 400px;
    
    background: #f3cdba url(../images/teachers_0311.png) bottom center no-repeat;
    
}
.hi_main .hi_teachers_001 .tfeatures_wrapper {
    text-align: center;
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul {
    display: inline-block;
}
.hi_main .hi_teachers_001 .tfeatures_wrapper ul li:last-child {
    width: 50%;
}

.hi_main .hi_learning_page_001 .page_nav_group > a {
    width: 30%;
}

}
@media (min-width: 1200px) {

.hi_main .hi_about_us_002 .timeline_wrapper {
    max-width: 1140px;
}

}
.imgbox {
    position: relative;
    /*background: white;*/
    height: 320px;
    width: 320px;
    float: left;
}
.imgbox img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}
.display_text_one{
    max-width: 305px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.display_text_many{
    max-width: 200px;
    height: 50px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pac_new { padding-left: 15px;}