#container{display: block; position: relative;}

#container2{display: flex; flex-direction: row; width: 100%; justify-content:flex-start; align-items: stretch; padding:60px 3% 0; gap: 3%;}
#container2 > .contents{ flex: 1 1 100%; width:82%; }
#container2 > .contents > .container_inside{ display:block; margin-bottom: 50px;}

#container2 > .aside{ flex:0 0 15%; padding:0 0% 0 0; }
#container2 .aside ul{list-style: none; display: flex; flex-direction: column; gap:5px;}
#container2 .aside ul > li{ width: 100%;}
#container2 .aside ul > li > a > img{width: 100%;}

.container_inside .themeBox{padding: 0px 0 0 0%;}
ul.theme{display: flex; flex-direction: row; justify-content:flex-start; align-items: stretch; list-style: none; gap: 15px; flex-wrap: nowrap; }
ul.theme > li{ flex:1 1 calc( 100% / 6 - 5 * 15px ); border:1px var(--main) solid; border-radius: 20px; padding:0; }
ul.theme > li a{display: flex; width: 100%; padding:20px 0; text-align: center; flex-direction: column; justify-content: center; align-items: center; }
ul.theme > li a .theme_text{ 
    color:var(--main);
    font-size:20px;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;}
ul.theme > li a .icon{fill: var(--main); }
ul.theme > li a:hover .icon{fill:var(--purplered);}
ul.theme > li a:hover .theme_text{color:var(--purplered);}
ul.theme > li:has(a:hover){border:1px var(--purplered) solid}
.icon_svg{margin-bottom: 10px; width: 90px; height: 75px;}


.container_inside .newsBox{padding: 0px 0 0 0%; }

.container_inside .repostBox{padding: 0px 0 0 0%; text-align: center;}
ul.repostArea{display:flex; flex-direction: row;  justify-content: flex-start; align-items: stretch; width: 100%; flex-wrap: wrap; gap:20px; text-align: left; padding:0; margin:0; list-style: none; }
ul.repostArea > li{display:inline-block; width: calc( ( 100% - 60px ) / 4  ); position: relative; } 
ul.repostArea > li > a{width:100%;}
ul.repostArea > li > a > img{ width: 100%; aspect-ratio: 3 / 2; transition: all .2s linear; }
/*ul.repostArea > li > a > img{ width: 100%; aspect-ratio: 16 / 9; transition: all .2s linear; }*/
ul.repostArea > li > a:hover > img{ transform: scale(1.05); }
ul.repostArea > li > a > .repostDate{ font-size:18px;margin:5px 0; color:#999;}
ul.repostArea > li > a > .repostTitle{ 
    font-size:21px;
    font-weight: bold;
    line-height: 1.3;
    color:var(--main);
    width: 100%;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  ul.repostArea > li > a:hover > .repostTitle{ color:var(--purplered)}

/*
.container_inside .videoBox{padding: 0px 0 0 0%; text-align: center;}
.videoArea{display:flex; flex-direction: row;  justify-content: flex-start; align-items: stretch; width: 100%; flex-wrap: wrap; gap:20px; text-align: left; }
.videoArea .videoitem{display:inline-block; width: calc( ( 100% - 60px ) / 4  ); position: relative; } 

.videoArea .videoitem .videosize{ width: 100%; aspect-ratio: 16 / 9;}
.videoArea .videoitem .videotitle{ font-size:18px;margin-top:10px}
.videoArea .videoitem .videotitle > .title{ 
    width: 100%;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
 */ 
#scrollimg_01{ display:block; position: relative;z-index: -1; border: 0px #c00 solid; }
#scrollimg_01 .img01{position: absolute;
    top:180px; 
    left:50%; 
    transform: translate(-50%, -50%);
    animation: circle 4s linear infinite; }
#scrollimg_01 .img02{position: absolute;top:0%; left:0%; transform: translate(-50%,-50%) }

.container_inside .purposeBox{padding: 50px 0% 0 0%;text-align: center;position: relative;}
.purpostBgAnimation{position: absolute; top:0; left:0; height: 100%; width: 100%; z-index: -1;}
.purpostBgAnimation img{
    position: absolute;
    width:100%; 
    height:auto; 
    left:0;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function:linear;
    animation-duration: 5s;
    opacity: 0.7;
}
.purpostBgAnimation .img01{
    top:80%; 
    transform: scale(1,1);
}
.purpostBgAnimation .img02{
    top:0%; 
    transform: scale(1,1);
}

@keyframes aaa{
    0%{top:0%; transform: scale(1,1);}
    100%{top:80%; transform: scale(1,-1);}
}
@keyframes bbb{
    0%{top:80%;transform: scale(1,1);}
    100%{top:0%;transform: scale(1,2);}
}

@keyframes circle{
    0%{transform: translate(-50%, -50%) rotate(0deg) translate(5%) rotate(0deg);}
    100%{transform: translate(-50%, -50%) rotate(360deg) translate(5%) rotate(-360deg);}
}


.purpostTitle{display: flex; flex-direction: row; justify-content: center; align-items: center; margin:30px 0 20px; gap:10%}
.purpostTitle h1{color:var(--main); font-size:42px; flex:1 1 auto; white-space: nowrap; }
.purpostTitle span{height:20px; flex:1 1 100%;position: relative;}
.purpostTitle .bgleft{ background: linear-gradient(to right,  rgba(220,213,244,0) 0%, rgba(220,213,244,1) 100%);}
.purpostTitle .bgright{background: linear-gradient(to left,  rgba(220,213,244,0) 0%, rgba(220,213,244,1) 100%);}
.purpostTitle .bgleft::after{ content: url("/public/parset/dot.png");position: absolute;right:-40px; top:50%; transform: translateY(-50%) scale(0.7);}
.purpostTitle .bgright::before{content: url("/public/parset/dot.png");position: absolute;left:-40px; top:50%; transform: translateY(-50%) scale(0.7);}
.purpostContent{font-size:25px;}

.container_inside .healthBox{padding: 0px 0 0 0%; text-align: center;}
.container_inside .healthContent{ display:flex; width: 100%; padding:0px;}
a.but{display:inline-flex; font-size:21px; padding:7px 20px;color: var(--main); border: 2px var(--main) solid;  border-radius: 20px; box-sizing: border-box; margin: 35px 0 0 0; user-select: none; }
a.but:hover{color: var(--white); background:var(--main);}


/*標題區*/
.subjectArea{display:flex; flex-direction: row; width: 100%; gap: 0px; justify-content: flex-start; align-items: center; margin-bottom: 30px; position: relative;}
.subjectArea .subject{ flex:0 0 auto; font-size:42px; font-weight: bold; color:var(--main);padding:0 0px 0 0; position: relative;}
.subjectArea .subject::after{ content: url("/public/parset/theme_img.png"); transform: scale(100%); position: absolute; top:-5px; right:-45px;}
.subjectArea .selectmenu{flex:1 0 auto; display: inline-flex; flex-direction: row; gap: 10px; padding:0 0 0 0% ; position: absolute; top:18%; left:250px; }
.subjectArea .selectmenu > a{ font-size:21px; padding:2px 15px; color:var(--main); border: 1px var(--main) solid; border-radius: 30px;}
.subjectArea .selectmenu > a:hover{background: var(--main); color:var(--white);}
.subjectArea .selectmenu > a.hover{background: var(--main); color:var(--white);}
.subjectArea .adorn{ flex:1 1 100%; height:40px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--lightpur) 100% );}
.subjectContent{display:block; width: 100%; overflow: hidden; position: relative; transition: height .2s linear; ; }
.selectSubject{display:flex; flex-direction: row; flex-wrap: nowrap; left: 0; top:0; position: relative; transition: all .3s linear; align-items: flex-start; }
/*標題區*/


@media screen and ( max-width:1350px ){
    .icon_svg{margin-bottom: 10px; width: 80px;}
}

@media screen and ( max-width:1280px ) {
    .icon_svg{margin-bottom: 10px; width: 70px;}
    ul.theme > li a .icon, ul.theme > li a .theme_text{fill: var(--main); color:var(--main);font-size:18px}
    .purpostTitle h1{font-size:38px;}
    .purpostContent{font-size:22px;}
    
    .container_inside .subjectArea .subject{ flex:0 0 auto; font-size:36px; font-weight: bold; color:var(--main);padding:0 0px 0 0; position: relative;}
    .container_inside .subjectArea .subject::after{transform: scale(0.8) translate(0,-10px);top:0px; right:-50px}
    .subjectArea .selectmenu{left:220px;}
    .container_inside .subjectArea .selectmenu > a{font-size:18px}
    
}


@media screen and ( max-width:1023px ) {
    #container2{flex-direction: column; padding:50px 0 0px;}
    #container2 > .contents{width: 100%;}
    #container2 > .aside{flex: 1; width: 100%; padding: 0; margin-bottom: 50px;}
    #container2 .aside ul{flex-direction: row; flex-wrap: wrap; gap: 15px;}
    #container2 .aside ul > li{width: calc( 100% / 4 - (45px / 4) );}

    ul.theme{gap:10px}
    ul.theme > li{padding:0px 0px; width: 100%;}
    
    .icon_svg{margin-bottom: 10px; width: 70px;}
    ul.theme > li a{padding:10px 0;}
    ul.theme > li a .icon, ul.theme > li a .theme_text{fill: var(--main); color:var(--main);font-size:18px}
    .repostArea .repostitem .repostTitle{ font-size:18px;margin-top:10px}

    ul.repostArea > li{display:inline-block; width: calc( ( 100% - 40px ) / 3  ); position: relative; } 

    #container2 > .aside{ flex:0 0 13%; padding:0 3% 0 ; }
    .container_inside .themeBox{padding: 0px 3% 0;}
    .container_inside .newsBox{padding: 0px 3% 0 ;}
    .container_inside .repostBox{padding: 0px 3% 0; text-align: center;}
    .container_inside .purposeBox{padding: 50px 0%;text-align: center;position: relative;}
    .container_inside .healthBox{padding: 20px 3%; text-align: center; background:var(--skyblue)}

}

@media screen and ( max-width:875px ){
    a.but{font-size: 18px; margin-top: 20px;}
    .purpostTitle h1{font-size:32px;}
    .purpostContent{font-size:21px;}
    .repostArea .repostitem{display:inline-block; width: calc( ( 100% - 40px ) / 3  ); position: relative; }
}





@media screen and ( max-width:767px ) {
    .icon_svg{margin-bottom: 5px; width: 55px;height:55px }
    
}

@media screen and ( max-width:710px ){
    a.but{font-size: 16px; margin-top: 20px;}
    .container_inside .subjectArea{gap:0px}
    .container_inside .subjectArea .subject{ flex:0 0 auto; font-size:31px; font-weight: bold; color:var(--main);padding:0 0px 0 0; position: relative;}
    .container_inside .subjectArea .subject::after{transform: scale(0.7) translate(0,-13px);}
    .container_inside .subjectArea .selectmenu > a{font-size:16px}

    ul.repostArea > li > a > .repostTitle{font-size:17px;}
}


@media  screen and ( max-width:639px ) {
    .container_inside .videoBox{padding:20px; background: var(--skyblue);}
    .videoArea .videoitem{display:inline-block; width: calc( 100% / 2 - 20px / 2 ); position: relative; } 
    #scrollimg_01{display:none}
    .purpostTitle h1{font-size:27px;}
    .purpostContent{font-size:18px;padding: 0 3%;}

    .purpostBgAnimation{overflow: hidden;}
    .purpostBgAnimation img{width:200%;}
    
    #container2 .aside ul li{ width: calc( 100% /3 - 30px / 3 );}
    ul.repostArea{gap:15px;}
    ul.repostArea > li{display:inline-block; width: calc( ( 100% - 15px ) / 2  ); position: relative; } 
    /*.container_inside .subjectArea .selectmenu{}*/
    .subjectArea .selectmenu{padding: 0px 0 0 16%; left:30%;}
    .container_inside .subjectArea .selectmenu > a{padding:2px 7px}
    .container_inside .subjectArea .adorn{display:none}

    ul.theme{ flex-wrap: wrap; gap:20px}
    ul.theme > li{ flex:1 1 calc( ( 100% - 40px ) / 3 );  }
    .icon_svg{margin-bottom: 5px; width: 50px;height:50px }
}


@media screen and ( max-width:519px ) {
    ul.theme{ flex-wrap: wrap;gap:10px}
    l.theme > li{ flex:1 1 calc( ( 100% - 20px ) / 3 );  }
    .icon_svg{margin-bottom: 5px; width: 50px;height:50px }

    .purpostBgAnimation img{width:300%;}
    .purpostTitle span{height:15px; flex:1 1 100%;position: relative;}
    .purpostTitle .bgleft::after{ right:-30px;  transform: translateY(-50%) scale(0.5);}
    .purpostTitle .bgright::before{ left:-30px; transform: translateY(-50%) scale(0.5);}
    
}

@media screen and ( max-width:420px ){
    #container2 .aside ul li{ width: calc( 100% /2 - 10px); }
    .container_inside .subjectArea{gap:20px}
    .container_inside .subjectArea .subject{ flex:0 0 auto; font-size:26px; font-weight: bold; color:var(--main);padding:0 0px 0 0; position: relative;}
    .container_inside .subjectArea .subject::after{transform: scale(0.7) translate(0,-24px);}
    .subjectArea .selectmenu{top:-12%; padding:0 0 0 25%;}
    .container_inside .subjectArea .selectmenu > a{padding:2px 7px; width: 58px; height:58px; display:inline-flex; justify-content: center; align-items: center;text-align: center;line-height: 1.2;}
    .container_inside .subjectArea .adorn{display:none}

    ul.repostArea{gap:10px;}
    ul.repostArea > li{display:inline-block; width: calc( ( 100% - 10px ) / 2  ); position: relative; }

}