@charset "UTF-8";

/*----------Reset 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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*pc*/

html {
  height: 100%; }


.wrap {
    background: #fdf9f2;
}


header.gool-lifevi {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: url(image/visual-market-bg.jpg)no-repeat #fdf9f2;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 160px 0 0 0;
    background-size: contain;
}



.head-vibg {
    background: url(image/visual-ybg.png) no-repeat center center;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
    background-position-y: 54px;
    background-size: contain;
        position: relative;
}


.head-vibg img {
    padding: 0 0 40px 0;
    width: 100%;
    max-width: 890px;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.2));
}

.visual-paper {
    background: url(image/visual-paper.png)no-repeat center center;
    position: absolute;
    width: 100%;
    height: 566px;
    max-width: 986px;
    background-size: contain;
    z-index: 1;
 
    background-position-y: 80px;
}


.good-life-titlebar {
    width: 100%;
    max-width: 1050px;
    margin: 25px auto;
}

.good-life-titlebar {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    background: #FFF;
}

.post-content {
    padding: 10px 20px;
    font-family: Microsoft JhengHei;
    font-weight: 700;
    font-size: 26px;
    line-height: 39px;
}
.good-life-titlebar {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    background: #FFF;
    border: solid 2px #ffdb45;
    position: relative;
}

.good-life-titlebar:after {
    content: "";
    width: 100%;
    border-bottom: solid 2px #ffdb45;
    margin: 0px 0px -14px 13px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
}

.good-life-titlebar:before {
    content: "";
    display: block;
    border-right: solid 2px #ffdb45;
    margin: 14px -14px 0px 0px;
    height: 100%;
    position: absolute;
    right: 0;
}

.member-gift-title {
    width: 100%;
    max-width: 918px;
    margin: 35px auto 20px;
}



ul.member-gift {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    text-align: center;
}



ul.member-gift li {
    display: inline-block;
    width: 100%;
    text-align: center;
    max-width: 345px;
    padding: 10px 0;

}
li.gift-img img {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
}


.join-member {
    width: 100%;
    max-width: 624px;
    margin: 0 auto;
    background: #ed1c24;
    border-radius: 20px;
}

.join-member {
    width: 100%;
    max-width: 624px;
    margin: 0 auto;
    background: #ed1c24;
    border-radius: 20px;
    box-shadow: 1px 1px 11px 4px #c2c2c291;
    padding: 2px 0 0 0;
    transition: 0.8s;
    position: relative;
    z-index: 1;
}


.join-member:hover {
    color: #FFF;
    background: #ff9b1b;
}
.ps-con {
    font-family: Microsoft JhengHei;
    font-size: 22px;
    line-height: 30px;
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    text-align: center;
    padding: 28px 0px;
}
span.redfont {
    color: red;
    font-family: Microsoft JhengHei;
    font-weight: 700;
}

span.redfont2 {
    color: red;
    font-family: Microsoft JhengHei;
    
}
.join-member img {
    width: 100%;
    max-width: 624px;
    padding: 1px 0 0 0;
}
/*---------------------------------------------animation---------------------------------------------*/
.aircraft {
    width: 100%;
    height: 260px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    
}

/*.aircraft:before {
    content: "";
    background: url(image/aircraft.gif) no-repeat;
    position: absolute;
    width: 1090px;
    max-width: 1100px;
    height: 344px;
    animation: aircraft 7s infinite alternate;
    top: 0px;
    left: 0px;
    bottom: 0;
    right: 0;
    text-align: center;
    margin: auto;
}*/

.aircraft img {
    animation: aircraft 8s infinite cubic-bezier(0.35, 0.4, 0.68, 0.74);
     /*animation-delay: 1s;*/
     position: absolute;
     opacity: 1;
}

@keyframes aircraft {
0% {
   transform:translateX(3000px);
   transform:translateY(10px); 
   left: 2000px;
   top: 100px
   opacity:0;
}
25% {
   transform:translateX(1000px);
   transform:translateY(50px); 
   opacity:1;
}
50% {
   transform:translateX(500px);
   transform:translateY(10px); 
}
75% {
   transform:translateX(0px);
   transform:translateY(50px); 
}
90% {
   opacity:1;
}
100% {
   transform:translateX(-3000px);
   transform:translateY(10px); 
   left: -1000px;
     top: 100px
     opacity:0;
}
}

@-webkit-keyframes aircraft {
0% {
   transform:translateX(3000px);
   transform:translateY(10px); 
   left: 2000px;
   top: 100px
   opacity:0;
}
25% {
   transform:translateX(1000px);
   transform:translateY(50px); 
   opacity:1;
}
50% {
   transform:translateX(500px);
   transform:translateY(10px); 
}
75% {
   transform:translateX(0px);
   transform:translateY(50px); 
}
90% {
   opacity:1;
}
100% {
   transform:translateX(-3000px);
   transform:translateY(10px); 
   left: -1000px;
     top: 100px
     opacity:0;
}
}

/*---------------------------------------------animation---------------------------------------------*/

.firework-bg {
    background: url(image/firework-bg.png);
    background-position: center;
    background-size: contain;
}

.a-tbg {
  
    background: url(image/about-goodfood.jpg) no-repeat center;
      background-attachment: fixed;
    background-size: cover;
}

.a-title-p img {
    width: 100%;
    max-width: 430px;
}

.about-content {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}


.about {
    background: url(image/a-arar-bg.png);
    padding: 50px 0;
    position: relative;
    z-index: 1;
}


.balloon-b {
    position: absolute;
    right: 10%;
    top: 20%;
    z-index: -1;
}

.balloon-b img {
    animation: balloon-b 5s infinite cubic-bezier(0.35, 0.4, 0.68, 0.74);
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}



.balloon-r {
    position: absolute;
    left: 10%;
    top: 20%;
    z-index: -1;
}
.balloon-r img {
    animation: balloon-b 5s infinite cubic-bezier(0.35, 0.4, 0.68, 0.74);
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}


.balloon-g {
    position: absolute;
    right: 10%;
    top: 10%;
    z-index: -1;
}


.balloon-g img {
    animation: balloon-b 5s infinite cubic-bezier(0.35, 0.4, 0.68, 0.74);
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}


.about-t-width {
    width: 100%;
    max-width: 550px;
    background: #fff;
    position: relative;
}




@keyframes balloon-b {
 
0% {
   transform:translateX(-10px);
   transform:translateY(-10px); 
   }

50% {
   transform:translateX(30px);
   transform:translateY(30px); 
   }
100% {
   transform:translateX(-10px);
   transform:translateY(-10px); 
   }

}

@-webkit-keyframes balloon-b {
 
0% {
   transform:translateX(-10px);
   transform:translateY(-10px); 
   }

50% {
   transform:translateX(30px);
   transform:translateY(30px); 
   }
100% {
   transform:translateX(-10px);
   transform:translateY(-10px); 
   }

}



.about-t-width:after {
    content: "";
    width: 99.5%;
    border-bottom: solid 2px #ffdb45;
    margin: 0px 0px -12px 13px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
}

.about-t-width:before {
    content: "";
    display: block;
    border-right: solid 2px #ffdb45;
    margin: 12px -10px 0px 0px;
    height: 100%;
    position: absolute;
    right: 0;
}
.aobut-con {
    width: 100%;
    max-width: 550px;
    padding: 36px 0 66px 0;
}

.aobut-con p {
    font-family: Microsoft JhengHei;
    font-size: 25px;
    line-height: 38px;
    letter-spacing: 6px;
    font-weight: 500;
}

.area-l {
    width: 100%;
    max-width: 550px;
    float: left;
    padding-top: 85px;
}

.about-r {
    width: 100%;
    max-width: 500px;
    float: right;
    text-align: center;
    padding: 0 0 25px 0;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
}

.about-t-width img {
    width: 100%;
    max-width: 470px;
}

.about-r img {
    width: 100%;
    max-width: 430px;
}

.about-title-img {
    width: 100%;
    max-width: 1050px;
    background: #fff;
    margin: 0 0 35px 0;
}


.about-7t-width {
    width: 100%;
    max-width: 1050px;
    position: relative;
}
.about-7t-width:before {
    content: "";
    display: block;
    border-right: solid 2px #ffdb45;
    margin: 12px -13px 0px 0px;
    height: 100%;
    position: absolute;
    right: 0;
}

.about-7t-width:after {
    content: "";
    width: 100%;
    border-bottom: solid 2px #ffdb45;
    margin: 0px 0px -12px 13px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    right: -13px;
}
.number {
    font-family: Microsoft JhengHei;
    font-size: 57px;
    font-weight: 400;
    border-bottom: solid 3px #ffdc4a;
    padding: 0 0px 11px 5px;
    width: 50px;
    text-align: center;
    float: left;
    position: relative;
}

.number:after {
    content: "";
    border-right: solid 3px #ffdc4a;
    position: absolute;
    top: 0;
    right: -10px;
    height: 78px;
    margin: 0px -10px 0px 9px;
}
.proposal-d {
    font-family: Microsoft JhengHei;
    font-size: 24px;
    font-weight: 400;
    padding: 0px 0 0px 0;
    letter-spacing: 6px;
    text-align: left
}
.proposal-wrap {
    width: 100%;
    max-width: 475px;
    background: #fff;
    padding: 22px;
    box-sizing: border-box;
}

.proposal-ud {
    padding: 0px 0 0 94px;
}

.proposal-u {
    padding: 0px 0px 11px 0px;
    text-align: left;
}


span.white:before {
    content: ".";
    display: block;
    color: #FFF;
}


ul.about-7 {
    text-align: center;
}
li.about-7-content {
    display: inline-block;
    width: 100%;
    max-width: 475px;
    margin: 15px 15px;
}
.Scroll {

height: 400px;
    width: 100%;
    line-height: 500px;
    text-align: center;
    background-attachment: fixed;
    background-size: cover;

}

.b-tbg {
    background: url(image/member-goodfood.jpg) no-repeat center;
        background-attachment: fixed;
        background-size: cover;
}
.b-title-p img {
    width: 100%;
    max-width: 358px;
}

.member {
    background: url(image/b-arar-bg.png);
    padding: 50px 0;
    position: relative;
    z-index: 1;
}


.member-content {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}

.member-con{
text-shadow: 0.1em 0.1em 0.05em #fff;
    font-family: Microsoft JhengHei;
    font-size: 25px;
    line-height: 38px;
    letter-spacing: 6px;
    font-weight: 600;
    padding: 20px 0;
}

.member-t-width{
    float: left;
}
.member-introduce-wrap {
    max-width: 700px;
    float: right;
}

li.in-bg {
    background: white;
    padding: 35px 25px;
    margin: 15px 0;
}

.in-content {
    font-family: Microsoft JhengHei;
    font-size: 25px;
    line-height: 38px;
    letter-spacing: 5px;
    font-weight: 600;
    width: 58%;
    display: inline-block;
    box-sizing: border-box;
    text-align: justify;
}

.in-t {
    width: 39%;
    display: inline-block;
}

.in-t img {
    width: 100%;
    max-width: 230px;
    border-bottom: solid 2px #ffdc4a;
    padding: 0 0 7px 0px;
}

.in-content p {
    padding: 0 10px 0 10px;
}

.in-content p {
    padding: 0 ;
}


.gool-slogan {
    width: 100%;
    max-width: 486px;
    margin: 0 auto;
    padding: 20px 0;
}

.gool-slogan img {
    width: 100%;
    max-width: 486px;
}

.mar-in-t{
    margin-bottom: 20px;
}

.join-button2 {
    width: 100%;
    max-width: 374px;
    margin: 0 auto;
}

.join-bu-wrap {
    background: url(image/join-button3-bg.png);
}

.join-button2 {
    width: 100%;
    max-width: 435px;
    margin: 0 auto;
}

.join-bu-wrap {
    background: url(image/join-button3-bg.png) #fff;
    padding: 13px;
    text-align: center;
    border-radius: 20px;
    border: solid 5px #ff004a;
    transition: 1s;
    box-shadow: 3px 3px 3px #5f5f5f7d;
}

.join-bu-wrap img {
    background: #fff;
    padding: 9px;
    border: solid 2px #ff004a;
    width: 90%;
    max-width: 374px;
}

.join-bu-wrap:hover {
    border: solid 5px #ffffff;
    background: url(image/join-button3-bg.png) #ff0000;
}


.member-up-title {
    width: 100%;
    max-width: 604px;
    margin: 0 auto;
    padding: 40px 0 0 0;
}


.meup-wrap {
    width: 100%;
    max-width: 865px;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
}
.me-up-content h1 {
    text-align: center;
    font-size: 31px;
    color: #ed2946;
    font-weight: 900;
    padding: 20px;
    letter-spacing: 8px;
}

.me-up-content {
    font-family: Microsoft JhengHei;
    width: 100%;
    max-width: 850px;
    margin: 0px auto;
    border: solid 2px #66e2ca;
}

.me-up-content h2 {
    font-size: 29px;
    font-weight: 600;
    line-height: 45px;
    padding: 0px 0 7px 30px;
}


.o-me-button2 {
    width: 100%;
    max-width: 624px;
    margin: 0 auto;
    padding: 0 0 30px 0;
}


.me-bu-wrap {
    background: url(image/step-button-bg.png) #fff;
    padding: 13px;
    text-align: center;
    border-radius: 20px;
    border: solid 5px #66e2ca;
    transition: 1s;
    box-shadow: 3px 3px 3px #5f5f5f7d;
}
.me-bu-wrap img {
    background: #fff;
    padding: 9px;
    border: solid 2px #66e2ca;
    width: 95%;
    max-width: 624px;
}



.me-bu-wrap:hover {
    border: solid 5px #ffffff;
    background: #66e2ca;
}


.c-title-p img {
    width: 100%;
    max-width: 734px;
    padding-bottom: 20px;
}


.c-tbg {
    background: url(image/qa-goodfood.jpg) no-repeat center;
    background-attachment: fixed;
    background-size: cover;
}


.food-qa-content {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}

.food-qa {
    background: url(image/a-arar-bg.png);
    padding: 50px 0 0 0;
}


/*.food-qa-con {
    text-shadow: 0.1em 0.1em 0.05em #fff;
    font-family: Microsoft JhengHei;
    font-size: 25px;
    line-height: 38px;
    letter-spacing: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 550px;
    height: 500px;
}*/


/*.qa-cont {
    width: 550px;
    height: 144px;
        padding: 0px 0 20px 0;
}*/


.food-class-content {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}


.food-class {
    background: url(image/a-arar-bg.png);
    position: relative;
    z-index: 1;
}

span.date-style {
    font-family: Microsoft JhengHei;
    font-size: 28px;
    background: #ffff61;
    padding: 10px 15px;
    font-weight: 600;
}

.class-date {
    padding: 0 0 10px 0;
}

   .why-qa-t {
    width: 100%;
    margin: 0 auto;
    max-width: 604px;
    padding: 20px 0 15px 0;

}

.why-qa-t img {
    width: 100%;
    max-width: 604px;
}

/*----------------test start----------------*/
.test-qa ul li {
    width: 100%;
    max-width: 1050px;
    background: #8befdb;
    padding: 7px;
    box-sizing: border-box;
    font-size: 0;
    margin: 20px 0;
    box-shadow: 3px 2px 10px #68686854;
}
.test-wrap {
    width: 100%;
    border: solid 2px #fff;
    margin: 0 auto;
    background: #8befdb;
    padding: 10px;
    max-width: 1050px;
    box-sizing: border-box;
}

.test-number {
    width: 120px;
    display: inline-block;
    border-right: solid 5px #8befdb;
    height: 120px;
    background: #ffff61;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
}

.test-number:before {
    content: "";
    height: 100%;
    display: inherit;
    vertical-align: middle;
}

.test-number p {
    font-size: 70px;
    text-align: center;
    background: #ffff61;
    font-weight: 600;
    font-family: Microsoft JhengHei;
    vertical-align: middle;
    display: inline-block;
}


.test-con {
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 240px);
    padding: 19px;
    box-sizing: border-box;
    height: 120px;
}

.test-con:before {
    content: "";
    height: 100%;
    display: inherit;
    vertical-align: middle;
}

.test-con-p {
    font-size: 26px;
    font-family: Microsoft JhengHei;
    display: inline-block;
    vertical-align: middle;
}

.test-ans {
    width: 120px;
    display: inline-block;
    height: 120px;
    background: #fff;
    vertical-align: middle;
    text-align: center;
    border-left: solid 5px #8befdb;
    box-sizing: border-box;
    transition: 0.5s;
}


.test-ans:hover {
    background: #ffff61;
}

.test-ans p:hover {
    font-weight: 600;
}
.test-ans:before {
    content: "";
    height: 100%;
    vertical-align: middle;
    display: inherit;
}
.test-ans p {
    font-size: 32px;
    text-align: center;
    font-family: Microsoft JhengHei;
     display: inline-block;
    vertical-align: middle;
    transition: 0.5s;
    color: #000;
}


/*----------------test end----------------*/

ul.button2-wrap {
    width: 100%;
    max-width: 725px;
    margin: 0 auto;
    text-align: center;
}

li.article-button {
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
}


li.article-button a {
    width: 316px;
        max-width: 100%;
    height: 86px;
    display: block;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}

.art-button1bg{
background: url(image/class1-button-1.png) no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
 
}

.art-button2bg{
background: url(image/class1-button-2.png) no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
 
}

.art-button4bg{
background: url(image/class3-button-1.png) no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
 
}

.art-button5bg{
background: url(image/class4-button-1.png) no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
 
}


.art-button5-1bg{
background: url(image/class4-button-2.png) no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
 
}


.art-button3bg{
background: url(image/class2-button-1.png) no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
 
}



.art-button2-1bg {
background: url(image/class1-button-2-1.png) no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
 
}

.d-tbg {
    background: url(image/good-school.jpg) no-repeat center;
    background-attachment: fixed;
    background-size: cover;
}
.d-title-p img {
    width: 100%;
    max-width: 358px;
    padding-bottom: 20px;
}


.good-school {
    background: url(image/b-arar-bg.png);
    padding: 50px 0 0 0;
}

.school-content {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    max-width: 1050px;
    box-sizing: border-box;
}

.school-wrap {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}


.school-l {
    display: inline-block;
    vertical-align: middle;
    padding: 19px;
    box-sizing: border-box;
    width: calc(100% - 440px);
}

.school-l:before {
    content: "";
    height: 100%;
    display: inherit;
    vertical-align: middle;
}

.school-l-p {
    font-size: 26px;
    font-family: Microsoft JhengHei;
    display: inline-block;
    vertical-align: middle;
    line-height: 35px;
    font-weight: 600;
    text-shadow: 0.1em 0.1em 0.05em #fff;
    letter-spacing: 2px;
}

.school-r {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
    transition: 0.5s;
}

.school-r:before {
    content: "";
    height: 100%;
    vertical-align: middle;
    display: inherit;
}
.school-r img {
    width: 100%;
    max-width: 430px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
}


.google-service-t {
    width: 100%;
    max-width: 326px;
    margin: 0 auto;
    padding: 20px;
}

.google-service-t img {
    width: 100%;
    max-width: 326px;
    background: #fff;
    padding: 18px;
box-sizing: border-box;
}

.iframe-rwd {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.iframe-rwd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.google-service {
    width: 100%;
    max-width: 1000px;
    background: #FFF;
    border: solid 16px #8befdb;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 2px 2px 2px #7c7c7c6e;
}

.top-button {
    padding: 25px;
    width: 100%;
    max-width: 110px;
    margin: 0 auto;
}

.top-button a img {
    transition: 0.5s;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}

.top-button a img:hover {
    transform: translateY(-20px);
}

/*tablet-------------------------------------------------------*/


@media screen and (max-width: 1024px) {
	
}

@media screen and (max-width: 768px) {

.about-title-img {
   width: 90%;
    margin: 0 auto 35px;
    
}
.area-l {
      float: none;
      margin: 0 auto;
}

    .balloon-b {
   display: none;
}

.about-r {
     float: none;
     margin: 0 auto;
}

.good-life-titlebar {
    width: 90%;
}

.member-t-width {
    text-align: center;
    float: none;
}

.member-introduce-wrap {
    
    float: none;
    margin: 0 auto;
}

}




/*--------------------------414px--------------------------*/


@media screen and (max-width: 414px) {

	header.gool-lifevi {
       padding: 60px 0 0 0;
        background-size: contain;
}

.visual-paper {
     background-position: -2px 56px;
}

.good-life-titlebar {
    width: 90%;

}

.member-gift-title {
    width: 90%;
    
}

.join-member {
    width: 90%;
    border-radius: 9px;
  }
.about-content {
    width: 90%;
}

.aobut-con {

    padding: 30px 0 30px 0;
}
.ps-con {
    width: 90%;
}


li.about-7-content {
    
    margin: 15px 0px;
}

.number {
       width: 100%;
}

.proposal-ud {
    padding: 87px 0 0 0px;
}

.proposal-u {
    text-align: center;
}

.number:after {
    content: "";
   display: none;
}
.proposal-d {
    line-height: 30px;
}

.a-tbg {
  background-attachment: inherit
    background-position-x: -967px;
}

.member-content {
    width: 90%;
}

.member-t-width {
     margin: 0 auto;
    width: 100%;
    float: none;
    padding: 20px 0;
    box-sizing: border-box;
   
}

.in-t {
    width: 100%;
    display: inline-block;
    text-align: center;
}

.in-content {
    width: 100%;
}

li.in-bg {
    margin: 15px 0;
}

.mar-in-t {
    margin-bottom: 0;
}


.meup-wrap {
      padding: 0;
   }

   .me-up-content h1 {  
    letter-spacing: 0px;
}


.me-up-content h2 {
    font-size: 26px;
    padding: 0px 24px 3px 24px;
}

.o-me-button2 {
    width: 90%;

    padding: 0 0 18px 0;
}
.me-bu-wrap img {
  padding: 0;    
}

.me-bu-wrap {
       padding: 7px;
}


.food-qa-con {
    text-shadow: 0.1em 0.1em 0.05em #fff;
    font-family: Microsoft JhengHei;
    font-size: 25px;
    line-height: 38px;
    letter-spacing: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
        width: auto;
    height: auto;
    
}

.food-qa-content {
    width: 90%;
}

.food-class-content {
    width: 90%;
        padding: 0 0 30px 0;
   }

.food-qa {
    background: url(image/a-arar-bg.png);
    padding: 0px 0 0 0;
}

.area-l {
    padding-top: 0px;
}

.google-service-t {
   
    box-sizing: border-box;
}

.balloon-b {
   display: none;
}


.balloon-r {
   display: none;
}


.balloon-g {
   display: none;
}




/*----------------test----------------*/
.test-number {
    width: 100%;
    border-right: 0;
    height: 85px;
   }

   .test-con {
 
    height: auto;
    width: 100%;
    line-height: 30px;
    border-top: solid 5px #8befdb;

}
.test-ans {
    width: 100%;
    border-left: 0;
    text-align: center;
    border-top: solid 5px #8befdb;
    height: 80px;
}

.school-l {
     width: 100%;
     padding: 0 19px;
}

.art-button1bg{

    background-size: contain;
    width: 100%;
}

.art-button2bg{

    background-size: contain;
    width: 100%;
}


.art-button3bg{

    background-size: contain;
    width: 100%;
}

.art-button4bg{

    background-size: contain;
    width: 100%;
}

.art-button2-1bg{

    background-size: contain;
    width: 100%;
}



.google-service {
    width: 90%;
       border: solid 9px #8befdb;
    }
.google-service-t img {
    
    box-sizing: border-box;
}



}
/*--------------------------375px--------------------------*/

@media screen and (max-width: 375px) {
	

header.gool-lifevi {
   
    padding: 35px 0 0 0;
    
}
.visual-paper {
   
    background-position-y: 60px;
}
}

/*--------------------------320px--------------------------*/
@media screen and (max-width: 320px) {
	
	.head-vibg {
    background-position-y: 35px;
}

.visual-paper {
    background-position-y: 40px;
}

}