@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%;}
  }



  /*版頭區塊*/
  @media screen and (min-width:768px){
  .Area_top {height: 570px;}
  .Area_top .title03 {position: absolute;left: 905px;top: 147px;z-index: 0;animation: mask_lefttoright 1.2s 1.5s infinite ease-in;opacity: 0;}
  .Area_top .smalltxt {position: absolute;left: 765px;top: 160px;z-index: 0;}
  .Area_top .deco3c {position: absolute;left: 80px;top: 370px;z-index: 0;}
  

 /*大標*/ 
 .Area_top .title01 {position:absolute;width: 44%;top: 128px;left: 180px;height: auto;z-index: 1;}
 .Area_top .title01 img {width: 88%;}
 .Area_top .title01  ul li{position: absolute;}
 .Area_top .title01 input{position: relative;top: -30px;}
 .Area_top .title02 {position:absolute;width: 31%;top: 310px;left: 270px;height: auto;z-index: 1;}
 .Area_top .title02 img {width: 88%;}
 .Area_top .title02  ul li{position: absolute;}
 .Area_top .title02 input{position: relative;top: -30px;}


 
}
  @media screen and (max-width:767px){
  .Area_top {height: 60vw;}
  .Area_top .mb_01{position:absolute; top:0; left:0 ;width: 100%; z-index:0;}
  .Area_top .title03 {position: absolute;width: 15.5%;top: 15.5vw;left: 80.5vw;animation: mask_lefttoright 1.2s 1.5s infinite ease-in;opacity: 0;}
  .Area_top .smalltxt {position: absolute;width: 13%;top: 17vw;left: 66vw;}
  .Area_top .deco3c {position: absolute;width: 75%;top: 40vw;left: -5.5vw;}


 /*大標*/ 
 .Area_top .title01 {width: 49%;position:absolute;top: 14vw;left: 7vw;height: auto;z-index: 7;}
 .Area_top .title01 img {width: 100%;}
 .Area_top .title01  ul li{position: absolute;}
 .Area_top .title01  ul li .PD .PD_img{display: block!important;}
 .Area_top .title02 {width: 36%;position:absolute;top: 33vw;left: 14.5vw;height: auto;z-index: 7;}
 .Area_top .title02 img {width: 100%;}
 .Area_top .title02  ul li{position: absolute;}
 .Area_top .title02  ul li .PD .PD_img{display: block!important;}



  }




/*副標輪播*/
.Area_top .topPD2 {position: absolute;top: 272px;left: 758px;width: 307px;height: 223px;overflow: hidden;z-index: 21;}
.Area_top .topPD2 ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: inherit;}
.Area_top .topPD2 ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
.Area_top .topPD2 ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}
@media screen and (min-width: 768px){
  .Area_top .topPD2 ul.PD_wrapper li img{width: 100%;}
}

@media screen and (max-width:767px){
  .Area_top .topPD2 {width: 47%;height: 23vw;position: absolute;top: 29vw;left: 58vw;overflow: hidden;}
  .Area_top .topPD2 ul.PD_wrapper li img{width: 68%;}
}



/*輪播物件小標*/
.topPDtitle{position: absolute;left: -8px;top: -10px;width: 88px;}
@media screen and (max-width: 767px) {
  .topPDtitle{left: -.5vw;top: 0vw;width: 10.5vw !important;}
}






/*間距*/
.Area_bottom {margin-bottom: -20px !important;}
@media screen and (max-width:767px){
  .Area_bottom {margin-bottom: -5vw !important;}
}





  @media screen and (max-width: 767px) {
    .pdaa.PD_layout[data-pd-li=BN] ul{ padding: 0 0em;grid-gap: 0em;}
}
  @media screen and (min-width: 768px) {
    .pdaa.PD_layout[data-pd-li=BN] ul{padding: 0 0px;grid-gap: 0px;}
}



  @media screen and (min-width:768px){
	.PD_layout.layout_PD01{ width: 97%;}
	}
	@media screen and (max-width:767px){
	.PD_layout.layout_PD01{ width: 100%;} 
	}



	@media screen and (min-width: 768px) {
		.PD_layout ul {padding: 30px 0;}
	}




  @media screen and (min-width: 768px) {
    .Area_swiper_box.bb01 {padding-bottom: 25px;background-color: #ffffff;}
}
@media screen and (max-width: 767px) {
  .Area_swiper_box.bb01 {padding-bottom: 5vw;background-color: #ffffff;}
}





@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: #dadada00;}
.Area_drawing-area-2x1 .PD_layout-CSSBG_01 .PD .PD_img {padding-top: 40px;padding-bottom: 70px;}
.Area_drawing-area-2x1 .PD_layout .PD img {width: 92%;height: auto;}
.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: #fff;}
.Area_drawing-area-2x1 .PD_layout .PD p {height: 4em;line-height: 3em;color: #ff99e2;}
.Area_drawing-area-2x1 .PD_layout .PD p del {font-size: 18px;padding-right: .25em;color: #bebebe;}
}
@media screen and (max-width: 767px) {
  .Area_drawing-area-2x1 .PD_layout .PD img {width: 90%;height: auto;}
  .Area_drawing-area-2x1 .PD_layout-CSSBG_01 .PD .PD_img {padding-top: 4vw;padding-bottom: 5vw !important;}
  .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: #dadada00;}
  .Area_drawing-area-2x1 .PD_layout[data-pd-h4="1"] .PD h4 {display: block;max-height: 1.5em;overflow: hidden;color: #fff;}
  .Area_drawing-area-2x1 .PD_layout .PD p {height: 2em;line-height: 2em;color: #ff99e2;}
  .Area_drawing-area-2x1 .PD_layout .PD p del {padding-right: .25em;color: #bebebe;}
}





/* 品牌開學點點名 */

/* 公版樣式調整 */
.PD_right_box .Area_swiper_box .PD_layout li{ background: url("PD_011.png?t=1788422265455") center no-repeat; background-size: 100%; padding: 12px 0;}
.PD_right_box .Area_content p{ display: none;}
.PD_right_box .PD_layout[data-pd-h3="5"] .PD h3{ margin-bottom: 0;}
.PD_right_box .PD_layout[data-pd-h3="5"] .PD h3 span{background-color: rgba(255, 255, 255, 0);font-size: 24px;color: #295baf;}
.PD_right_box .PD_layout[data-pd-h4="1"] .PD h4{ font-size: 24px; font-weight: bold;}
.PD_right_box .PD_into h4 span{ display: none!important;}
.PD_right_box .PD_layout .PD_img { padding: 1em 1em .5em;}
@media screen and (max-width:767px){
  .PD_right_box .Area_content .Area_swiper_box{right: 0vw;}

  /* 公版樣式調整 */
  .PD_right_box .Area_swiper_box .PD_layout li{padding: 4vw 0;}
  .PD_right_box .PD_layout[data-pd-h3="5"] .PD h3{ max-height: 1.7em;}
  .PD_right_box .PD_layout[data-pd-h3="5"] .PD h3 span{font-size: 4.2vw;max-width: 100%;}
  .PD_right_box .PD_layout[data-pd-h4="1"] .PD h4{font-size: 4.2vw;}
  .PD_right_box .PD_layout .PD_img { padding: 2vw 3vw;}
}



.Area_pd-carousel-sidelist .Area_item.Area_item-list .PD_layout ul {-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;background: url("PD_bg1.png?t=1788422265455") no-repeat top / 100% ; border-radius: 15px;}



/*3P輪播-作圖區*/
.Area_group-7 .Area_pd-carousel .PD_layout li{ background: url("PD_bg2.png?t=1788422265455") no-repeat top / 100% ; }
.Area_group-7 .Area_pd-carousel .PD_layout[data-pd-pdlogo] .PD .PD_logo{ position: absolute; border-radius: 30px; overflow: hidden; }
.Area_group-7 .Area_pd-carousel .PD_layout .PD h3{color: #ffffff;}
@media screen and (max-width:767px){
  .Area_group-7 .Area_pd-carousel .PD_layout[data-pd-pdlogo] .PD .PD_logo {top: 3vw; left: 12vw;  width: 46%; }
  .Area_group-7 .Area_pd-carousel .PD_layout .PD h3{ margin: -49.5vw 0 41vw; font-size: 1.05em;}
  .Area_group-7 .Area_pd-carousel .PD_layout .PD_img{ padding-top: 18vw; }
}
@media screen and (min-width: 768px){
  .Area_group-7 .Area_pd-carousel .PD_layout[data-pd-pdlogo] .PD .PD_logo {top: 18px; left: 85px;  width: 46%; }
  .Area_group-7 .Area_pd-carousel .PD_layout .PD h3{ margin: -337px 0 294px; font-size: 1.7em;}
  .Area_group-7 .Area_pd-carousel .PD_layout .PD h4{  font-size: 1.3em; }
  .Area_group-7 .Area_pd-carousel .PD_layout .PD_img{ padding-top: 120px; }
  .Area_group-7 .Area_pd-carousel .PD_layout .PD_into{ padding-bottom: 1.5em; }
}


/*3P輪播-BN*/
@media screen and (min-width: 768px){
  .Area_group-7 .Area_bn-carousel ul{ height: 180px; }
}
@media screen and (max-width:767px){
  .Area_group-7 .Area_bn-carousel ul{ height: 23vw; }
}