/* ============================================================================
   top-banner
=============================================================================== */
section.top-banner .photo {
    height: 150px;
    background-image: url(../images/photos/banner_photo_concept_01.jpg);
}
@media (min-width : 768px) {
    section.top-banner .photo { height: 200px;}
}
/* ============================================================================
   goals
=============================================================================== */
section.goals {
    padding-bottom: 40px;
}
section.goals .goals-ttl {
    padding-bottom: 40px;
}
section.goals h4.wt-sub span.f-en {
    font-size: 14px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', 'Lato', Helvetica, sans-serif;
}
section.goals .goals-ttl .quote {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform:         translateX(-50%);
    font-size: 24px;
    font-weight: 200;
    text-align: center;
    display: inline-block;
}
section.goals .goals-ttl .quote > span { position: relative; z-index: 2; }
section.goals .goals-ttl .quote:after,
section.goals .goals-ttl .quote:before {
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    display: inline-block;
    background: url(../images/bg_quote_grey.png) no-repeat 50% 50%;
    background-size: auto 100%;
    z-index: 0;
}
section.goals .goals-ttl .quote:before {
    top: -10px; left: -20px;
}
section.goals .goals-ttl .quote:after {
    bottom: -10px; right: -20px;
    transform: rotate(-180deg);
}
section.goals .goals-main {
    padding: 25px 15px;
    background: url(../images/grandient_bg_blue_2.png) repeat-x 50% 50%;
    background-size: auto 100%;
    -webkit-box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.05);
    box-shadow:         8px 8px 0px 0px rgba(0,0,0,0.05);
}
section.goals .goals-main .ttl {
    font-size: 20px;
    line-height: 1.2em;
    font-weight: 200;
    color: #fff;
    padding-bottom: 20px;
}
section.goals .goals-main .ttl .icon {
    width: 50px;
    margin-right: 6px;
}
section.goals .goals-main .ttl span { display: inline-block; }
section.goals .goals-main .ttl span.box {
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}
section.goals .goals-main .ttl span.box:after {
    position: absolute;
    bottom: 5px; left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
}
@media (min-width : 768px) {
    section.goals h4.wt-sub span.f-en { font-size: 20px;}
    section.goals .goals-ttl .quote {
        font-size: 32px;
    }
    section.goals .goals-ttl .quote:after,
    section.goals .goals-ttl .quote:before {
        width: 55px;
        height: 55px;
    }
    section.goals .goals-ttl .quote:before {
        top: -10px; left: -65px;
    }
    section.goals .goals-ttl .quote:after {
        bottom: -10px; right: -55px;
        transform: rotate(-180deg);
    }
    section.goals .goals-main {
        padding: 40px 40px 70px 40px;
        -webkit-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.05);
        box-shadow:         20px 20px 0px 0px rgba(0,0,0,0.05);
    }
    section.goals .goals-main .ttl .icon { width: 70px; }
    section.goals .goals-main .ttl {
        font-size: 32px;
        letter-spacing: 2px;
        padding-bottom: 0px;
    }
    section.goals .goals-main .ttl span.box { padding-bottom: 0; }
    section.goals .goals-main .ttl span.box:after {
        left: initial; right: -40px; bottom: initial; top: 0;
        height: 100%;
        width: 4px;
    }

}
/* ============================================================================
   alliance
=============================================================================== */
section.alliance {
    padding-bottom: 40px;
}
section.alliance a {
    text-decoration: underline;
}
section.alliance .alliance-ttl {
    padding-bottom: 14px;
}
@media (min-width : 768px) {
    section.alliance {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}