@media (max-width: 420px) { 
html, body { width: 360px; font-family:'Lato', sans-serif;}
#splash { background-size: 250px; }

#header { width: 360px; width: 100%;height: 65px;padding-top: 7px;border-bottom: 1px solid #37a9a8;background-color: #fff;}
#header nav { width: 360px; }
#header nav > div { width: 20%; padding: 0px 15px; margin: 0; box-sizing: border-box; }
#header nav .ci {width: 60%;text-align: center;}
#header nav .ci img { height: 53px; margin-top: -5px; }
#header nav .eshop {width: 40px;height: 40px;position: absolute;padding: 0px;display: inline-block;top: 80px;left: 312px;}
#header nav .eshop img {height: 40px;}

#header nav { line-height:70px;}
#header nav #main-nav {position: absolute;/* top: -20px; */width: 360px;margin: 0px;font-size: 0px;}
#header nav #main-nav .top_ci {margin: 0px; padding:0px;width: 70px;}
#header nav #main-nav .top_ci img {line-height: 26px;width: 71%;}
#header nav #main-nav > li {padding: 6px;line-height: 27px;}
#header nav #main-nav > li > a { color: #555555; font-weight: bold;font-size: 12px;}
#header nav #main-nav > li.active > a,
#header nav #main-nav > li.current > a { color: #37aead }

#header nav #main-nav > li {
    /* height: 0px; */
    /* overflow: hidden; */
    /* padding: 0; */
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#header.open-main-nav nav #main-nav > li {height: auto; overflow: visible; padding: 8px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.section{ width: 360px; overflow: hidden; }
.section .content-wrapper { width: 360px; }
.inner-content-wrapper { width: 360px; margin: 0px; }
.btn-more-view { margin-top: 20px; margin-bottom: 10px; margin-left: 10px;  margin-right: 10px; background-position: 65% 50%; background-color: #f6f6f6; }
.section > h2 { font-size: 25px;  margin: 10px; }
.section .content-wrapper > h2 { display: none; }

.flex-viewport { max-height: 800px; }
.flex-control-paging { top: 180px; }
.flex-control-paging li { margin: 0 6px; }
.flex-control-paging li a { width: 10px; height: 10px; }
.flex-direction-nav .flex-prev { width: 36px; height: 72px; background-color: transparent; border: none; background: url("../img/common/btn_prev_slide.png") no-repeat; left: 30px !important; }
.flex-direction-nav .flex-next { width: 36px; height: 72px; background-color: transparent; border: none; background: url("../img/common/btn_next_slide.png") no-repeat; right: 30px !important; }

#section-home {padding-top:50px; width:100%;height: auto;}
#section-home .container {height: 900px;padding-top: 50px;padding-bottom: 50px;min-height: auto;}

#section-home .about { top: 30%; padding: 0px 10px; min-height: 480px; height: 480px; text-align: center;}
#section-home .about img{width:100%;}
#section-home .about h1 {font-size: 40px;padding: 5px 0px;line-height: 1;text-align: center;position: absolute; left:0; right:0;margin-top: 13px;}
#section-home .about .desc {font-size: 16px;text-align: center;padding: 20px 10px;line-height: 1.2;position: relative;top: 89px;}

#section-home .about .intro-box1 {overflow: hidden; float: left;color: #555;font-weight: normal;position: relative;top: 97px;margin-bottom: 30px;}
#section-home .about .intro-box1 .brand-img { font-size: 0; margin-right:0px;margin-bottom: 30px;}
#section-home .about .intro-box1 .company-intro { float: left;}
#section-home .about .intro-box2 {overflow: hidden; float: left;color: #555;font-weight: normal;position: relative;top: 100px;padding-bottom:180px; background: url("../image/brand_img_2.png") no-repeat;background-size: 100% auto ; background-position: 0px 200px; }
#section-home .about .intro-box2 .brand-img { font-size: 0; margin-right:0px;margin-bottom: 30px;position: relative;top: 175px;}
#section-home .about .intro-box2 .company-intro { float: left;position: relative;}

#section-home .about .company-intro h3 { font-size: 19px; font-weight: 400; line-height: 1.2; margin-bottom: 10px;}
#section-home .about .company-intro p {font-size: 12px;}
#section-home .about .company-intro .highlight2 {font-size: 12px; color:#333232;}

#banners { width: 300px; left: 30px; right: auto; overflow: hidden; }
#banners .banner-content img { max-width: 100%; }

#section-about-our-story {height:auto; background-size: 8px auto;background-position:center 250px; padding-top:50px;}
#section-about-our-story .flex-direction-nav { display: none; }
#section-about-our-story .slide { height: auto; }
#section-about-our-story .container {padding-top: 146px;}
#section-about-our-story h2, 
#section-community-event h2,
#section-press h2 {font-size: 35px;top: 100px;margin-top: 0px; font-family:'Lato', sans-serif;}

#section-about-our-story .container .inner-content-wrapper .brnad_introduce li .brand-img img {width: 100%;}

#section-about-our-story .container .inner-content-wrapper .brnad_introduce {overflow: hidden; margin-bottom:60px;}
#section-about-our-story .container .inner-content-wrapper .brnad_introduce li {padding: 0px 3%;width: 42%;margin-bottom: 30px;}
#section-about-our-story .container .inner-content-wrapper .brnad_introduce li .brand-img {margin-bottom: 20px;}
#section-about-our-story .container .inner-content-wrapper .brnad_introduce li .brand-name {font-size: 14px; color: #fff;line-height: 17px;margin-bottom: 12px;}
#section-about-our-story .container .inner-content-wrapper .brnad_introduce li .brand-name .brand-slogan {font-size: 10px;font-weight: 300;}
#section-about-our-story .container .inner-content-wrapper .brnad_introduce li .brand-explain {color:#999;line-height: 18px; margin-bottom:10px;font-size: 12px;}

#section-community-event {padding-top: 55px;}
#section-community-event .container {padding-top:127px;}

##section-community-event .container .membership-table li.open .history-year{background: url("../image/btn_close.png") right no-repeat; background-position-x: 328px; background-position-y: 28px;}
#section-community-event .container .membership-table .history-year {font-size: 25px;padding: 5px 10px;text-align: left;background: url("../image/btn_open.png") right;background-repeat: no-repeat;background-position-x: 328px;background-position-y: 28px;}

#section-community-event .container .membership-table li .history-detail { font-size: 12px; display: none;  border-bottom: 1px solid #dcdcdc; font-family:'Lato', sans-serif; }
#section-community-event .container .membership-table li .history-detail .block-row {padding: 5px 5px;margin-bottom: 18px;}
#section-community-event .container .membership-table li .history-detail .detail-date {font-size: 16px; font-weight:200; color:#555;padding-right: 200px; float: left;vertical-align: top;font-weight:bold;}
#section-community-event .container .membership-table li .history-detail .detail-desc {float: left; text-align:left;font-size: 13px !important;color: #555;position: relative;top: 4px;}
#section-community-event .container .membership-table li .history-detail .detail-desc .off { font-size: 11px; color: #888; }
#section-community-event .container .membership-table li .history-detail .detail-desc .highlight { color: #e5005a; }
#section-community-event .container .membership-table li.open .history-detail {padding: 0px 7px; display: block;margin-top: 10px;}



#section-community-notice .content-wrapper { padding-top: 40px; }
#section-community-notice .content-wrapper > h2 { display: block; margin-top: 80px; margin-bottom: 10px; font-size:35px; }

li.no-item { box-sizing: border-box; margin: 10px; width: 340px !important; }

.search-box { text-align: center; }

#section-community-notice #notice-items { -moz-column-gap: 0px; -webkit-column-gap: 0px; column-gap: 0px; -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; margin-top: 0px; }
#section-community-notice #notice-items li { display: block;  margin: 10px }
#section-community-notice .info-wrapper { top: 0; margin-top: 0px; border: none; width: 100%; height: 102%; overflow: scroll; }
#section-community-notice .info-wrapper .btn-close { position: fixed; top: 10px; right: 10px; content:url("../image/btn_close_3.png"); width: 20px; }
#section-community-notice .info-wrapper .notice-detail { height: auto; overflow: auto; }
#section-community-notice .info-wrapper .notice-detail .article-detail { width: 100%; height: auto; float: none; padding: 10px; padding-top: 30px; }
#section-community-notice .info-wrapper .notice-detail .article-list { width: 100%; height: auto; background-color: #f6f6f6; height: auto; float: none; padding: 10px 10px 20px 10px; }
#section-community-notice .info-wrapper .notice-detail .article-detail .title { font-size: 17px; margin-bottom: 10px; }
#section-community-notice .info-wrapper .notice-detail .article-detail .date { font-size: 12px; }
#section-community-notice .info-wrapper .notice-detail .article-detail .detail { height: auto; overflow-y: auto;  overflow-x: auto; color: #555; }
#section-community-notice .info-wrapper .notice-detail .article-detail .detail img { display: block; width: 100%; margin: 10px 0px; }


#section-press {padding-top: 55px;}
#section-press .container {padding-top: 127px;}

#section-press .contact-info ul {margin: 0px 0px 4px; color: #555; font-size: 12px;}
#section-press .contact-info ul li { padding: 2px 0px; }
#section-press .contact-info .nar { width: 150px; }

#section-press #map-canvas { width: 358px; height: 300px; }
#section-press .contact-info {padding: 22px 10px;margin-bottom: 10px;overflow: auto;width: 100%;}
#section-press .contact-info .ci-essenlue { border-right: none; float: none;width: 0px;}
#section-press .contact-info li { clear: both; margin-bottom: 15px; }
#section-press .contact-info .first { width: auto; }
#section-press .contact-info .second { width: auto; }
#section-press .contact-info .first li { margin-bottom: 15px; }
#section-press .contact-info .title { float: none; }
#section-press .contact-info .desc { float: none; font-size: 12px; }
#section-press .contact-info .first .desc { margin-left: 0px; }
#section-press .contact-info .second .desc { margin-left: 0px; }

#footer { padding-top:0px; padding-bottom: 30px;height: 252px;}
#footer .content-wrapper { width: 100%; padding:0px 10px; box-sizing: border-box; }
#footer .copyright-text { position: absolute; top: 80px; }
#footer .txt-cs-center { font-size: 11px; }
#footer .txt-phone-number { font-size: 25px; }
#footer .txt-business-hours { font-size: 14px; }
#footer .txt-business-hours i { font-size: 10px; }
#footer #copyright ul li { font-size: 9px; letter-spacing: -1px; line-height: 1.1; }
#footer #copyright .escrow {font-size: 9px; letter-spacing: -1px; }
#footer #copyright .family-site-social { top: 40px; left: 10px; width: 340px; overflow: auto;padding-top:0px; }
#footer #copyright .family-site-social .select-box { float: left; display: block; width:300px;}
#footer #copyright .family-site-social .sns-buttons { float: left; display: block; padding-top: 0px; padding-left: 20px; }
#footer .go-top { width: 40px; height: 40px;  margin-left: 0px; left: auto; right: 10px; bottom: 10px; background-size: 12px; }
#footer .go-top p { margin-top: 18px; font-size: 10px; }


.hide-mobile { display: none; }
}

@media (min-width: 420px) {
	.hide-pc { display: none; }
}