@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: -1;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: 540px;}
.Area_top .main ul {padding: 0; grid-gap: 0;}
.Area_top .main ul li { pointer-events: none;}
.Area_top .main01 {position:absolute;left: 290px;top: 70px;z-index: 2;}
@media screen and (max-width:767px){
  .Area_top {height: 54vw;}
  .Area_top .main01 {left: 13vw;top: 5.5vw;width: 74%;z-index: 0;}

}

@keyframes pd3{
  0%{  transform: rotate(0deg);  }
  100%{  transform: rotate(6deg);  }
}







/*副標*/
.sub .PD_layout ul {display: flex;padding: 0;}
@media screen and (min-width: 768px){
.sub {position: absolute;top: 348px;left: 298px;width: 50%;height: 220px;z-index: 30;overflow: hidden;}	
.sub .PD_layout .PD img {width: 100%;}	
}
@media screen and (max-width:767px){
.sub {position: absolute;top: 38vw;left: 14vw;width: 72%;z-index: 30;overflow: hidden;}
.sub .PD_layout .PD img {width: 100%;padding: 0;}
}

  
  

/*攻略區*/
.Area01 {z-index:2;}
.Area01 .box {margin-bottom: 0px;padding: 30px 0 40px;}
.Area01 .box:last-child { margin-bottom: 0;}
.Area01 .activ_box {display: flex;flex-wrap: nowrap;background: url("Area01_activbg.png?t=1787814914116")top center no-repeat;background-size: 100%;padding: 30px 0 70px;}
.Area01 .activ_box .box_box {top: 54px;width: 50%;left: -25px;}
.Area01 .activ ul li:nth-child(1) { grid-row-start: 1; grid-row-end: 4;}
.Area01 .activ ul li { margin-bottom:0px ;}
.Area01 .BN_swiper ul.PD_wrapper {margin: 0;padding-top: 110px !important;height: 700px;width: 95%;margin-left: 20px;padding: 0 35px;}
.Area01 .activ ul.PD_wrapper {padding: 0 30px;grid-gap: 15px;}
@media screen and (max-width:767px){
  .Area01 {z-index:2;padding-top: 5vw;}
  .Area01 ul { padding: 0;}
  .Area01 .box { margin-bottom: 0vw;padding: 3vw 0 4vw;}
  .Area01 .activ ul li { margin-bottom:0vw ;}
  .Area01 .activ_box {padding: 5vw 0vw 8.5vw !important;background: url("Area01_activbg.png?t=1787814914116")top center no-repeat;background-size: 100%;}
  .Area01 .activ_box .box_box {top: 2vw;width: 50%;left: -2vw;}
  .Area01 .BN_swiper ul.PD_wrapper {margin: 0;padding-top: 9.5vw !important;height: 70vw;width: 90%;margin-left: 3vw;padding: 0 .5em;}
  .Area01 .activ ul.PD_wrapper {padding: 0 .5em;grid-gap: .2em;}
}




  @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: #ffffff;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: #ffffff;}
    .Area_drawing-area-2x1 .PD_layout .PD p {height: 9em;line-height: 5em;color: #6fd9ff;}
    .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: 1em 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: #ffffff;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: #ffffff;}
    .Area_drawing-area-2x1 .PD_layout .PD p {height: 2em;line-height: 2em;color: #6fd9ff;}
    .Area_drawing-area-2x1 .PD_layout .PD p del {padding-right: .25em;color: #e2e2e2;}
}





/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}