* { box-sizing: border-box; scroll-behavior: smooth; font-family: Arial, Helvetica, '思源黑體', '微軟正黑體', sans-serif}
a{text-decoration: none;}
body{background: #fff7fb; overflow-x: hidden; text-align: center;}
/*變數*/
:root{
    --title-color:#555086;
    --p-color:#4d4c57;
    --deep-pink:#f78cb0;
    --pink:#fadde9;
    --bg-purple:#b6b1d5;
    --line-color:#eee8ec;
    --nav-size:28px;
    --h2-size:36px;
    --h3-size:30px;
    --h4-size:26px;
    --p-size:22px;
    --tag-size:24px;
    --about-p:18px;
}

.space30{height: 30px;}
.space100{height: 100px;}
.first{position: relative;}
.first::before{content: ""; position: absolute; width:1px; height: 66%;right: 0.5px;top: 17%; background: var(--line-color); }
h3{color: var(--title-color); font-size: var(--h3-size); letter-spacing: 1px; font-weight: bold; margin-bottom:16px;}
h3>span{vertical-align: text-top;}
/*goTop*/
#goTop{display:none; position: fixed; width: 60px; line-height: 1; padding: 25px 0 15px 0; font-size: 20px; font-weight: 600; color: #555086; text-align: center; bottom: 30px; right: 30px; background: #f78cb0; border-radius: 50%; opacity: 0.6; cursor: pointer; z-index: 10;}
#goTop:hover{opacity: 1;}
#goTop::before{content: "▲"; position: absolute;width: 12px; top: 7px; left: 22px; font-size: 16px; }

/*版頭+nav*/
header.header{position:relative; height: 670px; background: url('../images/header.png') top center no-repeat;}
header.header h1{display: none;}

header nav{position: absolute;width: 100%; bottom: 0px; text-align: center;}
header ul{position:relative; display:inline-block;width:100%; max-width: 750px; background: #ffffff; border-radius: 10px; box-shadow: 0px 4px 6px #68585e28;
    letter-spacing: -0.31em; 
    *letter-spacing: normal; 
    *word-spacing: -0.43em; 
    text-rendering: optimizespeed;}
header ul::before{content: ""; position: absolute; width: 79px; height: 54px; left: -40px; top: -10px; background: url('../images/menu-1.png')top center no-repeat;}
header ul::after{content: ""; position: absolute; width: 62px; height: 61px; right: -35px; top: -16px; background: url('../images/menu-2.png')top center no-repeat;}

header ul li{display: inline-block; width: 50%;letter-spacing: normal;}
header ul a{display: inline-block; width: 100%; padding: 15px 0 10px 0; color: var(--title-color); font-size: var(--nav-size); font-weight: bold; vertical-align: middle;}
header ul a span{vertical-align: middle; margin-right:5px;}
header ul a span img{transform: translateY(-4px);}

/*前言+斗內*/
section.page1{display: inline-block; width:100%; text-align: center; background: url('../images/pg1-bg.png') top center no-repeat; padding: 64px 0 50px 0; margin: 0 auto;}
section.page1 p.intro{display:inline-block; width:100%; color: var(--p-color); font-size: var(--p-size); line-height: 2; letter-spacing: 3.8px; margin: 40px 0;}
section.page1 p.intro br.br{display: none;}
section.page1 p.pink{position: relative; display:inline-block; ; color: #ffffff; font-size: var(--p-size); line-height: 2;font-weight: normal; letter-spacing: 3.8px; background: var(--deep-pink); padding: 0 14px;}
section.page1 p.pink::before,
section.page1 p.pink::after{content: ""; position: absolute; width: 18px; height: 100%; top: 0; left:-18px; background: url('../images/ribbon-head.png')center center no-repeat; transform: rotateX(180deg);}
section.page1 p.pink::after{right: -18px; left: auto; transform: rotate(180deg);}
.activity{display:inline-block; width:100%; max-width: 1200px; background: #ffffff; border-radius: 10px; padding: 50px 0;
    letter-spacing: -0.31em; 
    *letter-spacing: normal; 
    *word-spacing: -0.43em; 
    text-rendering: optimizespeed;}
.activity *{letter-spacing: normal;}
.activity p{color: var(--p-color); font-size: 20px; line-height: 1.6;}
.activity p.extra{font-size: 14px; color: #4d4c57; line-height: 22px; margin-top: 15px;}
.activity>div{display: inline-block; width: 50%;}
.activity .first::before{ height: 100%; top: 0; }
.activity h3{letter-spacing: 3.4px;}
.activity h3 span{margin: 0 5px;}
/*商品區*/
section.page2{text-align: center; margin: 50px 0;}
section.page2 .wrap{display: inline-block; width: 100%; max-width: 1200px;padding: 20px; background: #fff; border-radius: 10px;}
section.page2 ul{position: sticky; display: inline-block; width: 80%; top: 0px; padding: 0 6%; margin: 25px 0; border-bottom: 1px solid var(--line-color);background: #fff; z-index: 10;
    letter-spacing: -0.31em; 
    *letter-spacing: normal; 
    *word-spacing: -0.43em; 
    text-rendering: optimizespeed;
}
section.page2 ul *{letter-spacing: normal;}
section.page2 .tag{display: inline-block; max-width: 150px; width: 16%;}
section.page2 .tag a{display: inline-block; width: 100%; font-size: var(--tag-size); color: var(--p-color); font-weight: 500; line-height: 1.5; cursor:pointer;}
section.page2 .tag.on a{color: var(--title-color); background: var(--pink);}
section.page2 .poi{display: none;}
section.page2 .poi.on{display: block;}

/*關愛自己*/
.flower-line{margin: 60px auto; text-align: center; overflow-x: hidden;}
section.page3{max-width: 1200px; width: 100%; text-align: center; margin: 0 auto;}
section.page3 h2{font-size: var(--h2-size); color: var(--p-color); letter-spacing: 1.2px; margin-bottom: 40px;}
section.page3 h2 span{color: var(--deep-pink);}
section.page3 .info{ display: inline-block; width: 65%; text-align: left; font-size: var(--about-p); line-height: 2;}
section.page3 .img{display: inline-block; width: 34%; font-size: 16px;}
section.page3 .img p{line-height:2; font-size: 14px; text-align: center;}
section.page3 .img img{width: 100%;}

h4{font-size: var(--h4-size); color: #fff; line-height: 1.8; letter-spacing: 1px; background: var(--bg-purple); padding: 0 15px; margin-bottom: 15px;}
.line{width:100%; max-width: 1200px; height: 1px; background: var(--line-color); margin: 50px auto;}

.wrap-info{display: flex; justify-content: space-between; align-content: stretch; flex-wrap: wrap;}
section.page3 h3,
section.page3 p{text-align: left; line-height: 1.5; letter-spacing: 1px;}
section.page3 .check .info,
section.page3 .medical .info{width: 48%; margin:40px 0 10px 0;}
section.page3 .check p,
section.page3 .medical p{font-size: var(--about-p); line-height: 1.5;}
section.page3 .wrap-info p{display: inline-block; width:58%; padding-left: 15px; }
section.page3 p{font-size: var(--about-p);}
section.page3 p.extra{ font-size: 16px; background: var(--pink); padding: 15px; }
section.page3 .check .info .img{width: 40%;}
section.page3 .check .img p{display: block; width: auto; font-size: 14px; text-align: center;}
section.page3 .flex{display: flex; justify-content: space-between; align-items: center;}
section.page3 .flex-reverse{display: flex; flex-flow: row-reverse; justify-content: space-between; align-items: center; margin-top:15px;}
section.page3 .medical .wrap-info .info:nth-child(2) p{display: block; width: auto;}
section.page3 .medical .img{width: 100%; margin-top: 20px;}
section.page3 .medical .wrap-info .info:nth-child(2) .img{text-align: right;}
section.page3 .medical .wrap-info .info:nth-child(2) img{width: auto; margin-right: -30px;}

/*資料來源*/
.source{position: relative; display: inline-block; text-align: center; font-size: 16px; line-height: 1.5; color: #c5b4be; padding: 50px 0 ;}
.source::before,
.source::after{position: absolute; content: ""; width: 96%; height: 1px; top:calc(50% - 0.5px); background: var(--line-color);}
.source::before{left: -100%; }
.source::after{right: -100%;}
.source br{display: none;}

/*logo區*/
.footer{display: flex; justify-content: center; text-align: center; align-items: center; background: #fff; padding: 30px 0; margin: 30px auto 0 auto;}
.footer .img{display: inline-block; width: 18%;}
.footer .img img{height: 100%;}

/*手機板*/
@media screen and (max-width:1400px){
    .flower-line img{width: 100%;}
}
@media screen and (max-width:1200px){
    section.page1{padding: 64px 20px 50px 20px;}
    section.page2{padding: 0 20px;}
    section.page3{display: inline-block; width:100%; padding: 0 20px; overflow-x:hidden; }
    section.page3 .medical .wrap-info .info:nth-child(2) img{margin-right: 0;}
    .footer .img{width: 25%;}

}

@media screen and (max-width:1024px){
    header.header{height: auto;}
    header.header h1{display: block;}
    header.header h1 img{width: 100%;}
    header nav{bottom: -58px;}
    .page1 .deco{margin-top: 40px;}
    .footer .img{width: 30%;}
    .footer .img img{width: 80%;}

}
@media screen and (max-width:768px){
    :root{
        --nav-size:24px;
    }
    .flower-line img{width: 138%;}
    header ul{width: 80%;}
    .activity{padding: 20px 40px;}
    .activity .second img{transform: scale(0.9);}
    .activity>div{width: 100%;}
    .activity .first::before{ width: 100%; height: 1px; left: 0; bottom:0; top:auto;  }
    section.page2 ul{width: 100%;}
    .activity p.extra{margin-bottom: 30px;}
    .activity h3{margin-top: 30px;}

    section.page3 .info{width: 100%;}
    .about .info br.br{display: none;}
    section.page3 .img{width: 60%; margin-top: 20px;}

    section.page3 .check .info, 
    section.page3 .medical .info{width: 100%;}
    .footer .img{width: 33%;}
    .footer .img img{width: 90%;}
    

}
@media screen and (max-width:600px){
    :root{
        --nav-size:20px;
        --p-size:18px;
        --tag-size:18px;
        --h2-size:30px;
        --h3-size:26px;
        --about-p:16px;
        --h4-size:22px;
    }
    header nav{bottom: -55px;}
    header ul::before,
    header ul::after{content: none;}
    header ul a{padding:12px 0 8px 0;}
    header ul a span img{transform:scale(0.7);}

    .activity p{font-size: 18px;}
    .activity p.extra{font-size: 12px;}

    .flower-line{margin: 40px auto;}

    section.page2 ul{padding: 0;}
    section.page3 h2{margin-bottom: 25px;}

}
@media screen and (max-width:425px){
    :root{
        --p-size:16px;
    }
    #goTop{width: 40px;padding: 14px 0 10px 0; font-size: 16px; bottom: 10px; right: 10px;  }
    #goTop::before{display: none;}
    .flower-line img{width: 205%;}
    header ul{width: 100%;}
    section.page1{padding: 60px 10px 30px 10px;}
    .page1 .deco{display: inline-block; width: 70%;}
    .page1 .deco img{width: 100%;}
    section.page1 p.intro{margin: 25px 0;}
    section.page1 p.intro br.br{display: block;}
    .activity p{font-size: 16px;}
    .activity .second img{transform: scale(0.8);}

    section.page2{padding: 0 10px;}
    section.page2 .wrap{padding: 8px;}
    section.page2 .tag{width: 16.6%;}
    section.page2 .tag a{ line-height: 2.5;}
    section.page3{padding: 0 10px;}
    section.page3 .img{width: 100%;}
    section.page3 .flex{flex-wrap: wrap;}
    section.page3 .wrap-info p{width: 100%;}
    section.page3 .check .info .img{width: 100%;}
    section.page3 .flex-reverse{flex-flow: row; flex-wrap: wrap; margin-top: 0;}
    section.page3 .flex-reverse .img{margin-bottom: 10px;}
    section.page3 .medical .wrap-info .info:nth-child(2) img{width: 70%;}
    .source{padding: 20px 0; font-size: 14px;}
    
}
@media screen and (max-width:375px){
    :root{
        --nav-size:18px;
        --h4-size:20px;
    }
    section.page1{padding: 50px 10px 0px 10px;}
    section.page1 p.pink{padding: 0 6px; letter-spacing: 1px;}
    section.page1 p.intro{letter-spacing: 2px;margin: 20px 0;}
    .activity{padding: 16px 15px;}
    section.page2 ul{margin: 15px 0;}
    section.page3 .check .info,
    section.page3 .medical .info{margin: 20px 0 10px 0;}
    .source br{display: block;}
    .space100{height: 60px;}
    .line{margin: 40px auto;}
    .about .info br{display: none;}
}
@media screen and (max-width:320px){
    .activity h3{letter-spacing: 2.5px;}
}