@charset "utf-8";
/* CSS Document */


/*背景*/
@media screen and (min-width:768px){
  .bg_01 { z-index:-46; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
  }
  @media screen and (max-width:767px){
  .m_bg { z-index: 0; position: absolute; top: 10.5vw; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; pointer-events:none; background-size: 100%;}
  }





/*版頭*/
.Area_top {position: relative;height: 420px;}
.Area_top .main ul {padding: 0; grid-gap: 0;}
.Area_top .main ul li { pointer-events: none;}
.Area_top .main01 {position:absolute;left: 200px;top: 90px;z-index: 2;}
.Area_top .notes {position:absolute;left: 620px;top: 330px;z-index: 4;}
.Area_top .date {position:absolute;left: 46px;top: 540px;z-index: 4;}
.Area_top .sub_bg {position:absolute;top: 340px;left: 210px;z-index: 1;pointer-events: none;}
.Area_top .top_line {position:absolute;top: 130px;left: 190px;z-index: 2;animation: mask_lefttoright 1.8s 0.8s infinite ease-in;} 
@media screen and (max-width:767px){
  .Area_top {height: 47.5vw;}
  .Area_top .main01 {left: 11vw;top: 9vw;width: 78.5%;}
  .Area_top .notes {left: 49.5vw;top: 33vw;width: 48.5%;}
  .Area_top .date {left: 4.5vw;top: 57vw;width: 19.5%;}  
  .Area_top .sub_bg {position: absolute;top: 34vw;left: 9vw;width: 50%;}
  .Area_top .top_line {position: absolute;top: 12vw;left: 9vw;width: 80%;}
}



/*副標*/
.sub .PD_layout ul {display: flex;padding: 0;}
@media screen and (min-width: 768px){
.sub {position: absolute;top: 347px;left: 195px;width: 46%;height: 220px;z-index: 30;overflow: hidden;}	
.sub .PD_layout .PD img {width: 74%;}	
}
@media screen and (max-width:767px){
.sub {position: absolute;top: 34.5vw;left: 12vw;width: 44%;z-index: 30;overflow: hidden;}
.sub .PD_layout .PD img {width: 100%;padding: 0;}
}

  


/*版頭公版*/
@media screen and (min-width: 768px){
  .Area00 {position: relative;z-index: 3;padding-bottom: 330px;}
  .Area00 .Area00_bg {position: absolute;margin: 0 auto;width: 105%;height: auto;top:0;left: -30px;}
  .Area00 .Area_swiper {width: 94.5%;left: 0px;top: 240px;transform: rotate(-2.5deg);}
  }
  @media screen and (max-width: 767px){
    .Area00 {position: relative;z-index: 0;padding-bottom: 22vw;}
    .Area00 .Area00_bg {position: absolute;margin: 0 auto;width: 100%;z-index: 0;}
    .Area00 .Area_swiper {width: 100%;left: 1vw;top: 19vw;transform: rotate(-3deg);/* z-index: 997; */}
    .Area00 .layout_PD .PD_into {padding: .3125em 0!important;}
  }
  







  @media screen and (min-width: 768px){
    .Area_drawing-area-2x1 .PD_layout[data-pd-h3="5"] .PD h3 span {display: inline-block;padding: 0 .5em;max-width: 85%;border-radius: 4px;color: #5e2d0f;background-color: rgb(218 218 218 / 0%) !important;}
    .Area_drawing-area-2x1 .PD_layout[data-pd-h4="1"] .PD h4 {display: inline-block;-webkit-box-orient: vertical;-webkit-line-clamp: 1;white-space: normal;overflow: hidden;color: #5e2d0f;}
    .Area_drawing-area-2x1 .PD_layout .PD p {height: 9em;line-height: 5em;color: #ffd155;}
    .Area_drawing-area-2x1 .PD_layout .PD p del {padding-right: .25em;color: #e2e2e2;}
    .Area_drawing-area-2x1 .PD_layout .PD_into {padding: .3125em;padding-bottom: .5em;padding: 3em 2em 0em;}
}
  @media screen and (max-width: 767px){
    .Area_drawing-area-2x1 .PD_layout[data-pd-h3="5"] .PD h3 span {display: inline-block;padding: 0 .5em;max-width: 85%;border-radius: 4px;color: #5e2d0f;background-color: rgb(218 218 218 / 0%) !important;}
    .Area_drawing-area-2x1 .PD_layout[data-pd-h4="1"] .PD h4 {display: inline-block;-webkit-box-orient: vertical;-webkit-line-clamp: 1;white-space: normal;overflow: hidden;color: #5e2d0f;}
    .Area_drawing-area-2x1 .PD_layout .PD p {height: 2em;line-height: 2em;color: #ffd155;}
    .Area_drawing-area-2x1 .PD_layout .PD p del {padding-right: .25em;color: #e2e2e2;}
    .Area_drawing-area-2x1 .PD_layout .PD_into {padding: 0em;padding-bottom: 0em;padding: .8em 0em 0em;}

}