@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

body { background-color: #fed73f; }
@media (max-width: 415px) { body { background-color: #fff; } }

a { text-decoration: none; }

html, button, input { font-family: 'cwTeXHei', Microsoft JhengHei, sans-serif; font-size: 16px; line-height: 1.42857143; color: #333; outline: none; }

.br { height: 20px; }

section { position: relative; }

.background-photo { background-image: url(../images/article/0.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo { height: 300px; background-position: center center; background-size: cover; } }

.background-photo1 { background-image: url(../images/article/pic2-4.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo1 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo2 { background-image: url(../images/article/pic3-1.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo2 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo3 { background-image: url(../images/article/pic4-1.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo3 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo4 { background-image: url(../images/article/pic5-1.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo4 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo5 { background-image: url(../images/article/pic6-1.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo5 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo6 { background-image: url(../images/article/pic7-1.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo6 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo7 { background-image: url(../images/article/pic8-1.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo7 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo8 { background-image: url(../images/article/pic9-1.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo8 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo9 { background-image: url(../images/article/pic10-1.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo9 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo10 { height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo10 { height: 300px; background-position: center center; background-size: cover; } }

.background-photo11 { background-image: url(../images/article/pic12-1.jpg); height: 80vh; background-position: center center; background-size: cover; }
@media (max-width: 415px) { .background-photo11 { height: 300px; background-position: center center; background-size: cover; } }

.container { width: 700px; padding: 0px 55px; background-color: #fff; position: relative; z-index: 2; left: 50%; top: -40px; transform: translateX(-50%); }
@media (max-width: 830px) { .container { width: 100%; padding: 0px; } }

.footer { text-align: center; margin: auto; width: 700px; padding: 50px 55px; font-size: 13px; }
@media (max-width: 830px) { .footer { width: 100%; padding: 20px 0px 40px 0px; } }
@media (max-width: 415px) { .footer { background-color: #fed73f; } }

.part1 .tittle { position: absolute; z-index: 2; top: 0; width: 35%; left: 50%; cursor: pointer; transform: translateX(-50%) translateY(0); }
@media (max-width: 1280px) { .part1 .tittle { width: 40%; } }
@media (max-width: 415px) { .part1 .tittle { width: 70%; } }
.part1 .background-photo img { width: 100%; height: 80vh; }
@media (max-width: 415px) { .part1 .background-photo img { height: 25vh; } }

.add-bottom { padding-bottom: 50px; }

.photo { width: 100%; }

.text { width: 100%; text-align: center; padding: 50px 0px 50px 0px; }
@media (max-width: 415px) { .text { width: 90%; margin: auto; } }
.text p { line-height: 30px; }

.icon { padding-top: 10px; }

.back { position: fixed; background-color: rgba(255, 255, 255, 0.66); color: #f06445; z-index: 10; font-size: 18px; text-decoration: none; letter-spacing: 5px; padding: 10px 15px 10px 20px; right: 0; top: 500px; }
@media (max-width: 830px) { .back { padding: 10px 15px 10px 15px; width: 14px; top: 20px; border-radius: 5px 0px 0px 5px; } }
.back:hover { -moz-transition: background-color 0.3s, padding 0.3s; -o-transition: background-color 0.3s, padding 0.3s; -webkit-transition: background-color 0.3s, padding 0.3s; transition: background-color 0.3s, padding 0.3s; background-color: white; padding: 10px 20px 10px 20px; }

.share { position: absolute; z-index: 8; bottom: 0; right: 0; height: 52px; cursor: pointer; }
@media (max-width: 830px) { .share { bottom: -12px; } }

.sahre-icon { display: inline-block; width: 60px; height: 52px; margin-left: -4px; }

.fb { background-image: url(http://www.sunnyhills.com.tw/images/share/bt_share_fb.svg); }

.line { background-image: url(https://topic.cw.com.tw/event/2017sunnyhills/images/article/bt_share_line.svg); }

/*# sourceMappingURL=article.css.map */

 .background-photo10 .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    border: 0;
}