/*==============================================
Common styles
================================================*/

body, html {
    font-family: 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;
}

div.pageWrapper {
    margin: 0 auto;
    width: 52.6875rem;
    max-width: 100%;
    overflow: hidden;
    padding: 1.875rem 0 4.125rem 0;
}

.pageWrapper h1 {
    font-family: 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;
    font-size: 2.25rem;
    font-weight: 400;
    margin-bottom: 1.25rem;
    margin-top: 1.375rem;
    color: #de1300;
    line-height: 0.6;
}

.pageWrapper h2 {
    color: #de1300;
    font-size: 1.52rem;
    font-weight: 500;
    margin: 0 0 1rem 0;
    text-align: center;
}

.pageWrapper p {
    margin-top: 0rem;
    color: #494949;
    font: 0.9rem 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;
    margin-bottom: 1.25rem;
    line-height: 1.76;
}

.pageWrapper p.first {
    font-size: 1rem;
    line-height: 1.76;
    font-weight: 300;
}

.pageWrapper a {
    color: #f06600;
}

.pageWrapper a:hover {
    color: #ff9000;
}

.pageWrapper a:link {
    outline: none;
}

.pageWrapper a,
a:link {
    text-decoration: none;
}

.pageWrapper img {
    border: none;
    margin-top: .7rem;
}

.container .pageWrapper .m-wrap.about {
    text-align: center;
}

p.p_img {
    display: flex;
}

p.p_img.right {
    flex-direction: row-reverse;
}

p.p_img.left {
    flex-direction: row;
}


/*==============================================
Intro
================================================*/

p.intro {
    color: #f06600;
    font: 1.2rem 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;
    margin: 1.125rem 0 2rem;
    font-weight: 300;
    line-height: 1.86;
}

.container {
    padding-top: 1.5rem;
}

/*==============================================
Intro Images
================================================*/

#about .column .link_tile {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
    display: inline-block;
}

.m-wrap .column:first-of-type {
    margin: 0rem 0 2rem 0;
}

.m-wrap .column:last-of-type {
    margin: 0rem 0 0rem 0;
}

#about .column .link_tile a {
    color: #222;
    font-size: 1rem;
}

#about .column .link_tile a:hover {
    color: #ff9000;
}

#about .column .link_tile img{
    border-radius: 8px;
    outline: 2px solid #ddd;
    display: block;
    margin-bottom: 0.75rem;
}

#about .column .link_tile a:hover img {
    outline: 2px solid #ff9000;
}

#about .column {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}

.press-mail {
    margin: 0.625rem 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.press-mail div {
    margin: 0.5rem 0 1.25rem 0 !important;
}

.press-mail .press {
    margin-right: 1.875rem !important;
    width: 13.75rem;
}

.press-mail .mail {
    width: auto;
}

.press-mail .mail img {
    vertical-align: text-top;
}

.spikey,
.all {
    max-width: 100%;
    height: auto;
}

.press-mail img {
    vertical-align: top;
}

svg.icon-svg {
    display: inline-block;
    width: 26px; 
    height: 21px;
    vertical-align: middle;
    background: white;
}

g.svgpath {
    fill: #e00400;
}

#about .events {
    display: flex;
    justify-content: space-around;
}

#about .events .wrapper {
    display: flex;
    justify-content: space-around;
    flex-basis: 50%;
}

#about .event {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #fff;
    line-height: 2;
    font-size: 0.9rem;
}

#about .event > * {
    display: block;
}

#about .event img {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    border: solid 2px #ddd;
    background-color: #ef4435;
    margin: 0 auto;
}

#about .event img:hover {
    background-color: #fb594c;
    border: 2px solid #ffffff;
}

#about .event span {
    white-space: nowrap;
}

/*==============================================
Icons
================================================*/

.icons.widespan {
    background-color: #d01000;
    padding: 2.5rem 1rem;
}

.background.widespan {
    background: #f3f3f3;
    padding-top: 3.125rem;
}

.widespan.map img {
    max-width: 1200px;
    margin: auto;
}

.widespan.map {
    background: #6e9ec3;
}

/*==============================================
Line seperator
================================================*/

hr:not(#_footer *) {
    border: none;
    border-top: 1px solid #ccc;
    border-bottom: none;
    width: 100%;
    height: 0.125rem;
    margin: 2.5rem 0 1.5rem 0 !important;
    text-align: left;
}

/*==============================================
Article
================================================*/

.a-left {
    float: left;
    margin-right: 8px;
}

.a-right {
    float: right;
}

.pageWrapper.secpart {
    padding: 1.875rem 0 0rem 0
}

/*==============================================
Bottom
================================================*/

.darkGrey-1 {
    padding-top: 1.125rem;
}

.darkGrey-1 span {
    color: #ef6000;
}

.darkGrey-1 a {
    margin-top: -10px;
}

p.darkGrey-1 {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.grey_line-1,
.grey_line-2 {
    border-top: 1px solid #ccc;
    width: 100%;
}

.wrapnot {
    white-space: pre-wrap;
}

.grey_line-2 {
    clear: both;
}

.darkGrey-2 {
    font-size: 0.875rem !important;
    max-width: 685px;
}

.pageWrapper p.celebrating {
    margin-bottom: 4.6875rem !important;
}

.spikey {
    float: right !important;
    padding: 0.3125rem 0 0.3125rem 0;
}

.widespan.map img {
    display: block;
    width: 100%;
    height: auto; 
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
    .pageWrapper .m-wrap.about img {
        width: 115px;
        height: 122px;
    }
    .pageWrapper p.celebrating {
        margin-bottom: 3.6875rem !important;
    }
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    .m-wrap {
        padding: 0 2.5rem;
    }
    .column>div {
        width: auto;
        margin-right: 0.625rem;
    }
    .wrapnot-2 {
        white-space: nowrap;
    }
    #about .column .link_tile { 
        font-size: 1.3rem;
        float: unset !important;
    }
    .pageWrapper .m-wrap.about img {
        width: 107px;
        height: 114px;
    }
    .icons.widespan {
        padding: 1.5rem 1.5rem 0.85rem 1.5rem;
    }
}

/* styles for medium screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    html { min-width: 18.75rem; }
    .m-wrap { padding: 0 2.5rem; }

    /*=============================== article*/
    .press-mail {
        justify-content: flex-start;
        flex-direction: column;
    }
    .darkGrey-1,
    .spikey {
        padding: 0.3125rem 0 0.3125rem 0;
    }

    .darkGrey-1 { min-width: 23rem; }
    .wrapnot { white-space: nowrap; }
    img.a-left.all { margin-bottom: 0.4rem; }
    #about .column { flex-direction: column; }
    #about .column .link_tile { margin: 0 auto; }

    #about .events .wrapper {
        justify-content: space-around;
        flex-basis: 100%;
        margin-bottom: 23px;
    }
    
    .events .wrapper a { width: 50%; }
    #about .events { max-width: 400px; }
    #about .events, p.darkGrey-1 { flex-direction: column; }
    
    #about .column .link_tile:first-of-type {
        margin-bottom: 2rem;
    }
    #about .column { gap: 0rem; }

    #about .column .link_tile { 
        float: unset !important;
    }
    .celebrating { clear: both; }

    p.p_img.left, p.p_img.right {
        flex-direction: column;
        padding-top: 1rem;
    }

    p.p_img.left span, p.p_img.right span {
        margin-top: 5px;
    }

    #about .events, p.p_img.left img, p.p_img.right img {
        margin: 0 auto;
    }

    .icons.widespan {
        padding: 1.5rem 1.5rem 0rem 1.5rem;
    }
    .pageWrapper .m-wrap.about img {
        width: 90px;
        height: 96px;
    }
    p.intro {
        font: 1.112rem 'Microsoft YaHei', 'Hiragino Sans GB', Arial, sans-serif;
        line-height: 1.9;
        font-weight: 500;
    }
    .pageWrapper p.first {
        font-weight: 500;
        font-size: 1.04rem;
    }

}

/* styles for medium screens (320px)
   ========================================================================== */

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