html {overflow-x: hidden;}
body {padding: 0 20px; overflow-x: hidden;}
html.mobile-navshow {overflow: hidden;}
html.mobile-navshow #navigation {display: block !important;}

/***** header *****/
#header .navtoggle {display: none;}
#header .navtoggle button {padding: 0 20px; height: 50px;}
#header .navtoggle span[class*="ion-"] {font-size: 36px;}
#header {position: relative; z-index: 6; margin: 0 auto; max-width: 1170px;}
#header:before {content:" "; position: absolute; bottom: 0; right: -9999em; left: -9999em; height: 5px; overflow: hidden; background: #2c3e50;}
#header:after {display: table; content:" "; height:0; overflow: hidden; clear: both;}
#header h1 {position: absolute; top: 0; left: 0; z-index: 4; padding: 60px 0 20px 0;}
#navigation {position: relative; padding-bottom: 5px; width: 100%;}
#navigation .utility {position: relative;}
#navigation .utility:after {display: table; content:" "; height:0; overflow: hidden; clear: both;}
#navigation .utility:before {content:" "; position: absolute; bottom: 0; right: -9999em; left: -9999em; height: 1px; overflow: hidden; background: #ecf0f1;}
#navigation .utility ul {float: right; border-bottom: 1px solid #ecf0f1; border-right: 1px solid #ecf0f1;}
#navigation .utility ul li {float: left; border-left: 1px solid #ecf0f1;}
#navigation .utility ul li a {display: block; padding: 0.7em 1.4em; color: #7f8c8d;}
#navigation .navigation {position: relative; z-index: 3;}
#navigation .navigation:after {display: table; content:" "; height:0; overflow: hidden; clear: both;}
#navigation .navigation a {display: block;}
#navigation .navigation > ul {float: right; color: #7f8c8d;}
#navigation .navigation > ul > li {position: relative; float: left; overflow: hidden;}
#navigation .navigation > ul > li > a {padding: 25px 1em; font-size: 24px; font-size: 1.714rem;}
#navigation .navigation > ul > li > ul {position: absolute; top: 100%; right: 0; left: 0; padding: 10px 0; border-left: 1px solid #425262; text-align: center; background: #2c3e50; font-size: 18px; font-size: 1.15rem; white-space: nowrap; color: #ecf0f1; letter-spacing: -0.04em; }
#navigation .navigation > ul > li:nth-last-child(1) > ul {border-right: 1px solid #425262;}
#navigation .navigation > ul > li > ul > li > a {padding: 4px 0;}
#navigation .event {display: none; position: absolute; z-index: 3; top: 100%; left: 0; margin-top: 43px; max-width: 36%;}
#navigation .event p {padding: 0 10px 0 20px;}
#navigation .event p img {max-width: 100%;}
#navigation .backgroundlayer {display: none; position: absolute; z-index: 2; top: 100%; padding: 10px 0; right: -9999em; left: -9999em; background: #2c3e50;}
#navigation.visible .navigation > ul > li {overflow: visible;}
#navigation.visible .event, #navigation.visible .backgroundlayer {display: block;}

/***** footer *****/
#footer {position: relative; z-index:5; margin: 70px auto 0 auto; max-width: 1170px;}
#footer .utility {position: relative; padding: 13px 0; border-top: 1px solid #ecf0f1; color: #7f8c8d;}
#footer .utility:before {content: " "; position: absolute; top: -1px; right: -9999em; left: -9999em; height: 1px; overflow: hidden; background: #ecf0f1;}
#footer .utility:after {display: table; content:" "; height:0; overflow: hidden; clear: both;}
#footer .utility .sitemenu {float: left; padding: 0.35em 0 0.3em 0; overflow: hidden;}
#footer .utility .sitemenu a {float: left; position: relative; padding: 0 16px; vertical-align: middle;}
#footer .utility .sitemenu a:before, #footer .utility .sitemenu a:after {content: " "; position: absolute; top: 50%; margin-top: -7px; width: 1px; height: 14px;}
#footer .utility .sitemenu a:before {left: 0; background: #7f8c8d;}
#footer .utility .sitemenu a:after {right: 0; background: #e1e4e4;}
#footer .utility .sitemenu a:nth-child(1) {padding-left: 0;}
#footer .utility .sitemenu a:nth-last-child(1) {padding-right: 0;}
#footer .utility .sitemenu a:nth-child(1):before, #footer .utility .sitemenu a:nth-last-child(1):after {display: none;}
#footer .utility .sitemenu span {display: inline-block; vertical-align: middle;}
#footer .utility .familysite {position: relative; float: right; font-size: 12px; font-size: 0.857rem; width: 220px;}
#footer .utility .familysite a {display: block; padding:0.4em 0;}
#footer .utility .familysite dt {border: 1px solid #ecf0f1;}
#footer .utility .familysite dt button {display: block; position: relative; padding: 0.4em 30px 0.4em 10px; width: 100%; text-align: left;}
#footer .utility .familysite dt button span[class*="ion-"] {position: absolute; top: 50%; right: 0; margin-top: -10px; width: 30px; height: 20px; line-height: 24px; text-align: center;}
#footer .utility .familysite dd {display: none; position: absolute; right: 0; bottom: 100%; left: 0; margin-bottom: -1px; border: 1px solid #ecf0f1; background: #fff;}
#footer .utility .familysite dd a {padding-left: 10px; padding-right: 10px;}
#footer .utility .familysite.toggle dd {display: block;}
#footer .infomation {position: relative; padding: 22px 0 70px 0; border-top: 1px solid #7f8c8d; font-size: 12px; font-size: 0.857rem; color: #7f8c8d;}
#footer .infomation:before {content: " "; position: absolute; top: -1px; right: -9999em; left: -9999em; height: 1px; overflow: hidden; background: #7f8c8d;}
#footer .infomation:after {display: table; content:" "; height:0; overflow: hidden; clear: both;}
#footer .infomation .address {padding: 0 240px 0 125px; background: url(../images/img-footer-logo.jpg) left center no-repeat;}
#footer .infomation .share {position: absolute; top: 26px; right: 0;}
#footer .infomation .share dd {float: left; margin-right: 10px;}
#footer .infomation .share dd:nth-last-child(1) {margin-right: 0;}
#footer .infomation .share dd a {display: block; width: 51px; height: 50px; background-image: url(../images/ico-sprite-footer.png);}
#footer .infomation .share dd:nth-last-child(4) a {background-position: 0 -80px;}
#footer .infomation .share dd:nth-last-child(3) a {background-position: -55px -80px;}
#footer .infomation .share dd:nth-last-child(2) a {background-position: -110px -80px;}
#footer .infomation .share dd:nth-last-child(1) a {background-position: -165px -80px;}

@media all and (max-width: 960px) {
    #navigation {padding-bottom: 3px;}
    #navigation .navigation > ul > li > a {padding: 1.05em 0.8em; font-size: 22px; font-size: 1.571rem;}
    #navigation .navigation > ul > li > ul {font-size: 16px; font-size: 1.143rem;}
}

@media all and (max-width: 800px) {
    #header:before {height: 3px;}
    #header h1 {position: static; padding: 10px 0 13px 0; text-align: center;}
    #header h1 img {height: 30px;}
    #header .navtoggle {display: block;}
    #header #navtoggle.navtoggle {position: absolute; top: 0; left: -20px;}
    #header #navtoggleclose.navtoggle {background: #34495e; color: #fff;}
    #navigation {display: none; position: fixed; top: 0; bottom: 0; left: 0; padding: 0; overflow-x: hidden; overflow-y: auto; background: #000; background: rgba(0,0,0,0.3);}
    #navigation .scroller {width: 280px; max-width: 100%; min-height: 100%; background: #2c3e50;}
    #navigation .utility {border-width: 3px 1px 1px 1px; border-style: solid; border-color: #6c7b8a; background: #34495e;}
    #navigation .utility:before {display: none;}
    #navigation .utility ul {float: none; border: 0;}
    #navigation .utility ul li {width: 50%; border-left: 0;}
    #navigation .utility ul li a {padding: 0.6em 0; text-align: center; color: #fff;}
    #navigation .navigation {padding-top: 6px;}
    #navigation .navigation > ul {float: none;}
    #navigation .navigation > ul > li {float: none;}
    #navigation .navigation > ul > li > a {padding: 6px 20px; font-size: 16px; font-size: 1.143rem;}
    #navigation .navigation > ul > li > ul {display: none; position: static; top: 0; right: 0; left: 0; padding: 10px 0; border-left: 0; text-align: left; font-size: 14px; font-size: 1rem; white-space: normal;}
    #navigation .navigation > ul > li:nth-last-child(1) > ul {border-right: 0;}
    #navigation .navigation > ul > li > ul > li > a {padding: 4px 30px;}
    #navigation .event {display: block; position: static; border-top: 2px solid #6c7b8a; padding: 10px; margin-top: 20px; max-width: 100%;}
    #navigation .event p {padding: 0;}
    #navigation .backgroundlayer {display: none;}

    #footer {margin-top: 50px;}
    #footer .utility {padding: 0;}
    #footer .utility .sitemenu {float: none; padding: 0.65em 0 0.6em 0; color: #555;}
    #footer .utility .sitemenu a {position: relative; margin-right: 17px; padding: 0 19px 0 0;}
    #footer .utility .sitemenu a:before {display: none;}
    #footer .utility .sitemenu a:after {display: block; width: 2px; background: #a6a6a6;}
    #footer .utility .sitemenu a:nth-last-child(1) {margin-right: 0; padding-right: 0;}
    #footer .utility .sitemenu a:nth-last-child(1):after {display: none;}
    #footer .utility .familysite {margin: 0 -20px; float: none; width: auto; font-size: 14px; font-size: 1rem; color: #a1a1a1;}
    #footer .utility .familysite dt {border: 1px solid #bdc3c7; background: #ecf0f1;}
    #footer .utility .familysite dt button {padding-left: 20px;}
    #footer .utility .familysite dd {border-color: #bdc3c7; background: #ecf0f1;}
    #footer .utility .familysite dd a {padding-left: 20px;}
    #footer .infomation {border-top: 0; padding: 20px 0 65px 0; color: #777;}
    #footer .infomation:before {display: none;}
    #footer .infomation .address {padding: 0; background: none;}
    #footer .infomation .share {position: static; margin-top: 30px; text-align: center;}
    #footer .infomation .share dd {float: none; display: inline-block; margin: 0 3px;}
    #footer .infomation .share dd a {width: 45px; height: 45px; background-size: 180px 73px;}
    #footer .infomation .share dd:nth-last-child(4) a {background-position: 0 0;}
    #footer .infomation .share dd:nth-last-child(3) a {background-position: -45px 0;}
    #footer .infomation .share dd:nth-last-child(2) a {background-position: -90px 0;}
    #footer .infomation .share dd:nth-last-child(1) a {background-position: -135px 0;}
}

@media all and (max-width: 640px) {
    body {padding: 0 10px;}

    #header .navtoggle button {padding: 0 10px;}
    #header #navtoggle.navtoggle {left: -10px;}
    #navigation .navigation > ul > li > a {padding: 6px 10px;}
    #navigation .navigation > ul > li > ul > li > a {padding: 4px 20px;}

    #footer {margin-top: 35px;}
    #footer .utility .sitemenu a {margin-right: 15px; padding-right: 16px;}
    #footer .utility .sitemenu a:after {width: 1px;}
    #footer .utility .familysite {margin: 0 -10px;}
    #footer .utility .familysite dt button {padding-left: 10px;}
    #footer .utility .familysite dd a {padding-left: 10px;}
    #footer .infomation {border-top: 0; padding: 20px 0 40px 0;}
}

@media all and (max-width: 480px) {
    #footer .utility .sitemenu, #footer .utility .familysite {font-size: 12px; font-size: 0.857rem;}
    #footer .utility .sitemenu a {margin-right: 9px; padding-right: 10px;}
    #footer .utility .sitemenu a:after {width: 1px;}
    #footer .infomation .address {font-size: 0.786rem;}
}

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

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