html {
    font-size: 16px;
}

body {
    font-family: 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* override */
#leftside li {
    line-height: 130%;
    padding: 10px 2px;
    text-align: left;
}

/*
#leftside>ul>li:nth-child(1) a {
	white-space: nowrap;
	animation: ani0317 2s infinite;
}
*/
@keyframes ani0317 {
    0% {
        color: #7b7b7b;
        text-shadow: 0 0px 0px #FF9999
    }

    50% {
        color: #FF9999;
        text-shadow: 0 0px 0px #FF9999
    }

    100% {
        color: #7b7b7b;
        text-shadow: 0 0px 0px #FF9999
    }
}

/* end override */



.clr {
    clear: both;
}

.star-content {
    margin: 0;
    padding: 0 0 10px 0;
    color: #333;
    position: relative;
    overflow: visible;
    font-size: 16px;
}

.news-detail .star-content p {
    margin-bottom: 25px;
}

.news-detail .star-content .lead {
    font-size: 1.25rem;
    font-weight: inherit !important;
}

.news-detail .star-content img {
    /*	margin: 6px 20px; */
}

.news-detail .star-content h2 {
    font-size: 24px;
    font-weight: bold;
    line-height: 140%;
    margin: 20px 0;
}

.news-detail .star-content h3 {
    font-size: 16px;
    font-weight: bold;
    line-height: 140%;
    margin: 5px 0;
}

.hr-purple {
    border-bottom: #d5dce6 solid 5px;
}

.news-detail .star-content ul {
    margin: 20px 0;
}

.news-detail .star-content li {
    margin: 2px 0;
}

.foretext {
    margin: -30px 0 30px 0;
    clear: both;
    color: #666;
    font-size: 15px;
    letter-spacing: 2px;
}

.foretext h2 {
    font-size: 21px;
    margin: 20px 0 10px 0;
    padding: 0;
    clear: both;
}

.teacher-block {
    margin: 40px 0 0 0;
    clear: both;
    border-top: #e6e6e6 solid 1px;
    padding: 20px 0;
}

.teacher-title {
    font-size: 26px;
    color: #333;
    margin: 10px 0;
    padding: 0;
}

.teacher-subtitle {
    font-size: 21px;
    color: #777;
    margin: 10px 0;
    padding: 0;
}

.news-detail h2 {
    line-height: 140%;
}

.news-detail table {
    border: none;
    border-spacing: 0;
    padding: 0;
    margin: 10px 0;
}

.news-detail th,
.news-detail td {
    vertical-align: top;
}

.news-detail .star-content td p {
    margin: 0 0 25px 0;
    padding: 0;
}

.q {
    font-weight: bold;
}

.q-icon {
    background: #F90;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 50px;
    height: 50px;
    width: 50px;
    display: inline-block;
    border-radius: 25px;
    text-align: center;
    margin-right: 10px;
}

.a-icon {
    background: #69C;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 50px;
    height: 50px;
    width: 50px;
    display: inline-block;
    border-radius: 25px;
    text-align: center;
    margin-right: 10px;
}

.ball {
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

@media(max-width: 1024px) {
    .mobile-hide {
        display: none;
    }
}

iframe {
    max-width: 100%;
}

@media(max-width: 800px) {
    iframe:not(.instagram-media) {
        max-width: 100%;
        height: 250px;
    }
}

.main-pic {
    width: 100%;
}

.feature .stickybox {
    clear: both;
}

.fullwidth {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.btn-group a {
    margin-bottom: 10px;
}

.button-group a {
    margin-bottom: 10px;
}

/* blink */
.btn-danger-blink {
    background-color: #7266ba;
    color: #fff !important;
    animation: btndangerblink 2s infinite;
}

.btn-danger-blink:hover {
    background: #f00 !important;
}

.btn-danger-blink i {
    color: #fff !important;
}

@keyframes btndangerblink {
    0% {
        background-color: #7266ba;
    }

    50% {
        background-color: #f00;
    }

    100% {
        background-color: #7266ba;
    }
}

/* Yellow-blink */
.btn-yellow-blink {
    background-color: #7266ba;
    color: #fff !important;
    animation: btnyellowblink 2s infinite;
}

.btn-yellow-blink:hover {
    background: #ffda2a !important;
}

.btn-yellow-blink i {
    color: #fff !important;
}

@keyframes btnyellowblink {
    0% {
        background-color: #7266ba;
    }

    50% {
        background-color: #ffda2a;
    }

    100% {
        background-color: #7266ba;
    }
}

.font-13 {
    font-size: 13px !important;
}

.font14,
.font-14 {
    font-size: 14px !important;
}

.font15,
.font-15 {
    font-size: 15px !important;
}

.font16,
.font-16 {
    font-size: 16px !important;
}

.font18,
.font-18 {
    font-size: 18px !important;
}

.font-21 {
    font-size: 21px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-32 {
    font-size: 32px !important;
}

/* width */
.w-100 {
    width: 100%;
}

.row.gutters-1,
.row.gutter-1 {
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
}

.row.gutters-1>[class*="col-"],
.row.gutter-1>[class*="col-"] {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.row.gutters-2,
.row.gutter-2 {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
}

.row.gutters-2>[class*="col-"],
.row.gutter-2>[class*="col-"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.row.gutters-3,
.row.gutter-3 {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
}

.row.gutters-3>[class*="col-"],
.row.gutter-3>[class*="col-"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.bg-cover {
    background: 50% 50% no-repeat;
    background-size: cover;
}

.lh-120 {
    line-height: 120% !important;
}

.lh-130 {
    line-height: 130% !important;
}

.lh-140 {
    line-height: 140% !important;
}

.lh-150 {
    line-height: 150% !important;
}

.lh-160 {
    line-height: 160% !important;
}

.cursor-pointer {
    cursor: pointer;
}

/* background color */
.bg-f3f3f3 {
    background-color: #f3f3f3 !important;
}

.bg-yamaha-purple {
    background-color: #39266B !important;
}

.text-red {
    color: #f00 !important;
}

.text-orange {
    color: #e1994c !important;
}

.bg-orange {
    background: #e1994c !important;
}

.bg-yellow {
    background: #ffda2a !important;
}

.bg-fea {
    background: #fea !important;
}

.text-blue {
    color: #00aeeb !important;
}

.text-blue:hover {
    color: #00aeeb !important;
}

.bg-black {
    background: #000 !important;
}

.bg-white {
    background: #fff !important;
}

.bg-rose {
    background: #e95379 !important;
}


.text-pink {
    color: #fb6d9d !important;
}

.text-black,
.text-black * {
    color: #000 !important;
}

.text-333 {
    color: #333 !important;
}

.text-white,
.text-white * {
    color: #fff !important;
}

.text-green {
    color: #093 !important;
}

.text-purple {
    color: #7266ba !important;
}

.label {
    font-size: inherit;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
}

.news-detail ol {
    margin: 0 0 0 17px;
    padding: 0;
}

.news-detail li {
    margin: 0;
    padding: 0;
}

.pt-55 {
    padding-top: 55%;
}

.cover-box {
    background: 50% 50% no-repeat;
    background-image: none;
    background-size: auto;
    background-size: cover;
}

.col-sm-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    width: 20%;
    max-width: 20%;
}


.sec-title-group {
    font-size: 21px;
    line-height: 50px;
    height: 50px;
    margin-bottom: 30px;
    color: #676767;
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}

.sec-title {
    background: #fff 0 0 url(../img/2019spring/bg-sec-title.gif) repeat-x;
    background-size: auto;
    background-size: cover;
    padding: 0 20px;
    position: relative;
    color: #676767;
    line-height: 50px !important;
    height: 50px !important;
    box-sizing: border-box;
    display: inline-table;
    white-space: nowrap;
    font-size: 21px !important;
    margin-bottom: 30px;
    font-weight: normal;
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}

.sec-title::after {
    width: 3px;
    line-height: 50px;
    height: 50px !important;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    content: url(../img/2019spring/bg-sec-title-after.gif);
}

.sec-title::before {
    width: 3px;
    line-height: 50px;
    height: 50px !important;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    content: url(../img/2019spring/bg-sec-title-before.gif);
}

.story-box {
    background: #fff !important;
    width: 800px;
    max-width: 100%;
}

.story-box .badge {
    font-size: 44px !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0;
    font-style: italic;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
}

.story-box img {
    max-width: 100% !important;
}

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

.story-box,
.drawbox {
    width: 760px;
    padding: 20px;
    border-radius: 9px;
}

.story-box h2 {
    margin-top: 0;
    margin-bottom: 21px;
}

.story-box iframe {
    width: 100%;
    height: 405px !important;
}

@media all and (max-width: 960px) {

    .story-box,
    .drawbox {
        width: 100%;
    }

    .story-box iframe {
        width: calc(100% + 40px) !important;
        height: calc(75vw / 500 * 315);
        margin-left: -20px !important;
        margin-right: -20px !important;
    }
}

.badge-brown {
    background: #e95a3d !important;
    color: #fff !important;
}

.text-yamaha,
.text-yamaha-purple {
    color: #39266B !important;
}

.text-yamaha:hover,
.text-yamaha-purple:hover {
    color: #39266B !important;
}

.big-popup {
    width: 700px;
    max-width: 100%;
}

h2.btn-secondary {
    background: #6c757d !important;
    cursor: auto !important;
}

.nowrap {
    white-space: nowrap;
}

/* table */
.table-px-2 th,
.table-px-2 td {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.table .thead-info th {
    color: #fff !important;
    background-color: #17a2b8 !important;
    border-color: inherit !important;
}

thead, tbody, th, td {
    color: #333;
}

/* border */
.border-1 {
    border-width: 1px !important;
}

.border-2 {
    border-width: 2px !important;
}

.border-3 {
    border-width: 3px !important;
}

.border-4 {
    border-width: 4px !important;
}

.border-5 {
    border-width: 5px !important;
}

.border-6 {
    border-width: 6px !important;
}

.border-7 {
    border-width: 7px !important;
}

.border-8 {
    border-width: 8px !important;
}

.border-9 {
    border-width: 9px !important;
}

.border-10 {
    border-width: 10px !important;
}

.border-15 {
    border-width: 15px !important;
}