/* =====================================================================================================
   Rih Content >> 基本元素 (原始 CSS)
===================================================================================================== */

/**************  文字樣式定義 > for Rich COntent  *************/

/* H4 >> 副標 */
.markets-top-banner.richcontent h4 {
   padding-bottom: 30px;
}


/* (文圖居中時) H4 >> 副標 */
.markets-top-banner.richcontent .text-block.text_block_top-center h4 {
   margin-right: 0em;
}





@media (min-width: 1921px) and (max-width: 2560px) {

   /* 滿版 >> .text_block_top-left >> 圖片右 + 文左邊 */
   .Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_top-left .image_block {
   position: relative;
   right: 23%;
   right: 30%;
   }

   /* 滿版 >> .text_block_top-right >> 圖片左 + 文右邊 */
   .Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_top-right .image_block {
   position: relative;
   left: 17%;
   margin-right: 10%;
   }

 }







/* =====================================================================================================
   Rih Content >> 共同元素 (加註特別 CSS)
===================================================================================================== */




/**************  Section > for Rich Content  *************/





/**************  文字樣式定義 > for Rich COntent  *************/




/**************  圖片樣式定義 > for Rich COntent  *************/

/* 遮住 Button > 文字區 > Image */
.Pointer-Events_None .markets-top-banner.richcontent div[class*="text-block"] img.img-responsive {
	pointer-events: none !important;
}




/* 圖片 >> 邊框 */
.Image-Border .Full_Width_Rich_Content img, 
.Image-Border .Rich_Content img {
	/* border: 1px solid #b2b4b4; */
	border: 1px solid #cbcbcb;
}

.Image-None-Breder .markets-top-banner.richcontent img.img-responsive,
.Image-None-Breder .markets-top-banner.richcontent .image_block img {
    border: unset !important;
}


/* 圖片 + 圖片的影片黑塊 >> 圓角 */
.Image-Radius .Full_Width_Rich_Content img, 
.Image-Radius .Rich_Content img, 
.Image-Radius .Full_Width_Rich_Content a.play_btn::before, 
.Image-Radius .Rich_Content a.play_btn::before, 
.Image-Radius .richcontent .image_block a.play_btn {
	border-radius: 7px;
}



/* 圖片 >> 陰影小 */
.Image-Shadow .Full_Width_Rich_Content img, 
.Image-Shadow .Rich_Content img {
filter: drop-shadow(4px 6px 3px rgba(0, 9, 35, 0.1));
}


/* 圖片 >> 陰影大 */
.Image-ShadowX .Full_Width_Rich_Content img, 
.Image-ShadowX .Rich_Content img {
filter: drop-shadow(12px 12px 12px rgba(0, 0, 0, 0.3));
}


/* 圖片 >> 刪除陰影 */
.Image-NoShadow .Full_Width_Rich_Content img, 
.Image-NoShadow .Rich_Content img {
filter: none !important;
}





/* 圖片 >> 一般不放大 ( 大於 1024 再放大 ) */
.Image-Scale_Large .Full_Width_Rich_Content img, 
.Image-Scale_Large .Rich_Content img {
	transform: scale(1.0);
}



/* 圖片註解 >  Note for Rich Content */
.Rich_Content h4 .rc_note, 
.Full_Width_Rich_Content h4 .rc_note {
font-size: 14px;
color: #666;
letter-spacing: 0.5px;
line-height: 20px;
display: inline-block;
}

/* 圖片 >> 圓角(左上 + 右下) */
.Image-Radius-V1 div[class*="text-block"] .image_block, 
.Image-Radius-V1 div[class*="text-block"] .image_block img {
   border-radius: 50px 10px 50px 10px;
}

/* 圖片 >> 圓角(左上 + 右下) > border 變粗 */
.Image-Radius-V1.Image-Border div[class*="text-block"] .image_block img {
   border: 10px solid #fff;
   border: 7px solid #fff;
}




/* 影片縮圖 a::before 圖片變大 >> Icon-1 */
.Large-Icon_Video-1 .richcontent a.play_btn::before {
	background: rgba(3, 48, 119, 0.15) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play_Icon_Mline_Opt100.png) no-repeat center center;
}

/* 影片縮圖 a:hover::before 圖片變大 >> Icon-1 */
.Large-Icon_Video-1 .richcontent a.play_btn:hover::before {
	background: rgba(3, 48, 119, 0.15) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play_Icon_Mline_Opt100.png) no-repeat center center;
}







/* 藍色 Mask(蓋圖) >> for Two-Columns >> text-block > col-md- > background-image */
.Mask-before-Rich-Columns .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::before, 
.Mask-before-Rich-Columns .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::before {
    background-color: rgba(25, 43, 64, 0.99);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b2d42', endColorstr='#0a3e7f',GradientType=0 );
    background: -moz-linear-gradient(to right bottom, rgba(5, 68, 136, 0.8) 0%, rgba(16, 108, 223, 0.9) 60%, rgba(16, 145, 223, 0.9) 100%);
    background: -webkit-linear-gradient(to right bottom, rgba(5, 68, 136, 0.8) 0%,rgba(16, 108, 223, 0.9) 60%,rgba(16, 145, 223, 0.9) 100%);
    background: linear-gradient(to right bottom, rgba(5, 68, 136, 0.8) 0%,rgba(16, 108, 223, 0.9) 60%,rgba(16, 145, 223, 0.9) 100%);
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: inherit;
    top: 0;
    left: 0;
}







/* =====================================================================================================
   RWD   >>  Rich Content Element (一般物件)
===================================================================================================== */

/* 一般pc小螢幕 */
@media (min-width: 980px) and (max-width: 1199px) {}





/* 橫向智慧手機到竪立平板電腦解析度 >> 1024 以上 */
@media (min-width: 1024px) {

   /* Rich Content >> Text Block >> 上下距離高度 */
   .markets-top-banner.richcontent .text-block {
      padding: 130px 0 !important;
   }


   /* 圖片 + 圖片的影片黑塊(a::before) >> 放大 ( > 1024px ) */
   .Image-Scale_Large .Full_Width_Rich_Content img, 
   .Image-Scale_Large .Rich_Content img, 
   .Image-Scale_Large .Full_Width_Rich_Content a.play_btn::before, 
   .Image-Scale_Large .Rich_Content a.play_btn::before {
   transform: scale(1.1);
   }

   /* Banner 中的 text-block 垂直居中 (包含圖文左右上下) */
   .Vertical-Align .markets-top-banner.richcontent .text-block {
   margin: 0 auto;
   display: flex;
   align-items: center;
   padding-top: unset !important;
   padding-bottom: unset !important;
   }

   /* Banner 僅 text_block_top-center/ Bottom 垂直居中 (僅含圖文上下) */
   .Vertical-Align .markets-top-banner.richcontent .text-block.text_block_top-center, 
   .Vertical-Align .markets-top-banner.richcontent .text-block.text_block_bottom-center {
   justify-content: center; /* 水平置中 */
   flex-direction: column; /* 垂直排列 (每一個單物件分不同行垂直排列) */
   }

   /* Banner 高度要一樣 (不一樣銜接會出錯)*/
   .Vertical-Align .markets-top-banner::before, 
   .Vertical-Align .RC_BG, 
   .Vertical-Align div.RC_BG, 
   .Vertical-Align .markets-top-banner.richcontent div[class*="text-block"] {
   height: 93vh;

   height: 75vh;/* 要給基本高度 >> 因為 flex, 所以 padding 都設為 0 */
   }

   /* Banner 中的 text-block/text_block_top-center 垂直居中 */
   .Vertical-Align .markets-top-banner.richcontent .text-block.text_block_top-center .wording_block, 
   .Vertical-Align .markets-top-banner.richcontent .text-block.text_block_bottom-center .wording_block, 
   .Vertical-Align .markets-top-banner.richcontent .text-block .wording_block {
   margin: 0 auto !important;
   }


}







/* 1300 以下 */
@media (max-width: 1300px) {

}




/* 1281 以下 */
@media (max-width: 1281px) {

   /* Solutions Guide Landing */
   .Solution_Scenarios .markets-top-banner.richcontent .text_block_top-right .wording_block, 
   .Solution_Scenarios .markets-top-banner.richcontent .text_block_top-left .wording_block {
   text-align: left;
   margin: 0 auto !important;
   margin-bottom: 7% !important;
   }

}



/* 1023 以下 */
@media (max-width: 1023px) {



}


/* 979 以下 (iPad) */
@media (max-width: 979px) {

   /* 圖片 >> 隱藏 */
   .Transparent-Object .Full_Width_Rich_Content .image_block, 
   .Transparent-Object .Rich_Content img,
   .Transparent-Object .Full_Width_Rich_Content .image_block, 
   .Transparent-Object .Rich_Content img {
   display: none !important;
   }


   /* Solutions Guide Landing */
   section.Solution_Scenarios video#vid_BG {
   width: 330% !important;
   }

}


/* 811 以下 */
@media (max-width: 811px) {

   /* Rich Content >> 垂直/居中排列 */
   .markets-top-banner.richcontent .text_block_top-left, 
   .markets-top-banner.richcontent .text_block_top-right {
   display: flex !important;
   align-items: center;
   flex-direction: column;
   text-align: center;
   }

 }



/* iPad */
 @media (max-width: 810px) {

	/* 滿版 .Full_Width_Rich_Content >> 圖上下時 >> 統一寬度 */
	.Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_top-center .image_block, 
	.Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_bottom-center .image_block {
	max-width: 80%;
	margin: 5% auto 20px !important;
	}

	/* 滿版 .Full_Width_Rich_Content >> 圖上下時 >> 統一寬度 (這裡的寬度跟 margin 會影響影片連結時的 a:before) */
	.Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_top-center img.img-responsive, 
	.Full_Width_Rich_Content .markets-top-banner.richcontent .text_block_bottom-center img.img-responsive {
	max-width: 100%;
	margin: 0 auto !important;
	}


}




/* 736 以下 */
@media (max-width: 736px) {}


/* 比手機大-比平板小-解析度 */
@media (min-width: 481px) and (max-width: 600px) {}



/* iPhone 6 & 6 plus > 4.7吋--手機及其他更小解析度 */
@media (min-width: 373px) and (max-width: 414px) {}



/* 橫向智慧手機及其他更小解析度 */
@media (max-width: 480px) {

   /* Solutions Guide Landing */
   section.Solution_Scenarios video#vid_BG {
   width: 630% !important;
   }

}


@media (max-width: 460px) {}



















/* =====================================================================================================
   Rih Content [.Mask-Slogan/ .Mask-Slogan-Dark/ .Mask-Slogan-Light ] >> .wording_block >> 文字區塊底色 > 黑/白 + 模糊 
===================================================================================================== */




/* 橫向智慧手機到竪立平板電腦解析度 >> 1024 以上 */
@media (min-width: 1024px) {

   /* Mask-Slogan */
   .Mask-Slogan .markets-top-banner.richcontent .text-block .wording_block {
   padding: 3% 5%;
   backdrop-filter: blur(5px);
   border-radius: 12px;
   }



   /* Mask-Slogan-Dark */
   .Mask-Slogan-Dark .markets-top-banner.richcontent .text-block .wording_block {
   background-color: rgba(0,0,0,.3);
   padding: 3% 5%;
   backdrop-filter: blur(5px);
   border-radius: 12px;
   }




   /* Mask-Slogan-Light */
   .Mask-Slogan-Light .markets-top-banner.richcontent .text-block .wording_block {
   background-color: rgba(255,255,255,.3);
   padding: 3% 5%;
   backdrop-filter: blur(5px);
   border-radius: 12px;
   }


}


















/* =====================================================================================================
   Rih Content [.Two-Columns] >> Text-Block >> Layout 編排樣式定義 > for Rich Content 
===================================================================================================== */

/* 影片背景 > 底色 */
section[class*="Two-Columns"] .RC_BG {
   background-color: #011d32 !important;
   background-color: #01375b !important;
   background-color: #eef2f5 !important;
}

/* Two-Columns >> text-block >> 上一層滿版 */
section[class*="Two-Columns"] div.markets-top-banner.richcontent .RC_BG > div {
  width: 100%;
}

/* Two-Columns >> text-block > col-md- > background-image */
section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-5"],
section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-pull-6"]  {
  background-attachment: unset;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  position: relative;
  z-index: 1;
  background-color: #0c1d31;
}

.Two-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::after, 
.Two-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::after, 
.Two-Columns.Mask-before-Rich-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::after, 
.Two-Columns.Mask-before-Rich-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::after/*, 
.Two-Columns.Mask-before-Rich-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::before, 
.Two-Columns.Mask-before-Rich-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::before, 
.Two-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::before, 
.Two-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::before*/ {
  content: '';
  color: rgba(255,255,255,0.98);
  font-size: 2.6em;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2em;
  text-align: center;
  /* font-style: italic; */
  border-radius: 300px;
  border: 5px solid #fff;
  border: 7px solid rgba(255,255,255,.99);
  border: 4px solid rgba(255,255,255,.99);
  z-index: 1;
  display: block;
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 190px;
  height: 190px;
  margin: 0 auto;
  padding: 4.5%;
  background-repeat: no-repeat;

  /* Dark Blue to Light Blue Color */
  background: #008dbf;
  background: -moz-linear-gradient(45deg, rgba(29,85,172,0.9) 7%, rgba(0,141,191,0.9) 91%);
  background: -webkit-linear-gradient(45deg, rgba(29,85,172,0.9) 7%,rgba(0,141,191,0.9) 91%);
  background: linear-gradient(45deg, rgba(29,85,172,0.9) 7%, rgba(0,141,191,0.9) 91%);

  /* Green to Blue Color */
  background: #91cb2e;
  background: -moz-linear-gradient(45deg, rgba(134, 193, 49, 0.9) 7%, rgba(0,141,191,0.9) 91%);
  background: -webkit-linear-gradient(45deg, rgba(134, 193, 49, 0.9) 7%,rgba(0,141,191,0.9) 91%);
  background: linear-gradient(45deg, rgba(134, 193, 49, 0.9) 7%, rgba(0,141,191,0.9) 91%);

  /* Green to Light Green Color */
  background: #91cb2e;
  background: -moz-linear-gradient(45deg, rgba(134, 193, 49, 0.99) 7%, rgba(164, 220, 42, 0.99) 91%);
  background: -webkit-linear-gradient(45deg, rgba(134, 193, 49, 0.99) 7%, rgba(164, 220, 42, 0.99) 91%);
  background: linear-gradient(45deg, rgba(134, 193, 49, 0.99) 7%, rgba(164, 220, 42, 0.99) 91%);
  background: -moz-linear-gradient(30deg, rgba(134, 193, 49, 0.99) 7%, rgba(134, 203, 33, 0.99) 91%);
  background: -webkit-linear-gradient(30deg, rgba(134, 193, 49, 0.99) 7%, rgba(134, 203, 33, 0.99) 91%);
  background: linear-gradient(30deg, rgba(134, 193, 49, 0.99) 7%, rgba(134, 203, 33, 0.99) 91%);
}

.Two-Columns.Mask-before-Rich-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::after, 
.Two-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::after {
  left: 90.4%;
}

.Two-Columns.Mask-before-Rich-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::after, 
.Two-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::after {
  left: -9%;
}



section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] .image_block img {
  border: none !important;
}

section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text_block_top-"] .image_block img {
  left: unset !important;
}


/* 992以上 */
@media (min-width: 992px) {

  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div.col-md-5.col-md-offset-1 {
  margin-left: 0%;
  }

}

/* 1024 以上 */
@media (min-width: 1024px) {

  /* Two-Columns >> text-block >> 上一層滿版 */
  section[class*="Two-Columns"] div.markets-top-banner.richcontent .RC_BG > div {
  width: 100%;
  }

  /* RC_BG >> 下面內容物 > 垂直居中 */
  .Text-Block_Align-CenterV .markets-top-banner.richcontent .RC_BG {
  display: flex;
  align-items: center;
  }

  /* RC_BG >> text-block> No Padding */
  .Text-Block_Align-CenterV .markets-top-banner.richcontent .RC_BG .text-block {
  padding: 0 !important;
  }


  /* Two-Columns >> RC_BG >> 下面內容物 > 垂直居中 */
  .Two-Columns .markets-top-banner.richcontent div[class*="text_block_top-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text_block_top-"] div[class*="col-md-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text_block_top-"] div[class*="col-lg-"] {
  display: flex;
  align-items: center;
  }

  /* Two-Columns >> RC_BG >> text-block + col-md-> No Padding */
  .Two-Columns .markets-top-banner.richcontent div[class*="text-block"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-"]  {
  padding: 0 !important;
  }

  /* Two-Columns >> RC_BG >> text-block + col-md(圖文底) > 統一高度 */
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-"]  {
  height: 75vh;
  }

  /* Two-Columns >> RC_BG >> text-block + col-md(圖文底) > 統一寬度 */
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-"]  {
  width: 50%;
  }

  /* Two-Columns.Corner-Round >> for Two-Columns >> 圓形角 */
  .Two-Columns.Corner-Round .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::before, 
  .Two-Columns.Corner-Round .markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-pull-6"] {
  border-radius: 0 0 7% 0; /* Bottom-Right Circle */
  }

  /* Two-Columns >> for Two-Columns >> 圓形角 */
  .Two-Columns.Corner-Round .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::before, 
  .Two-Columns.Corner-Round .markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-5"] {
  border-radius: 0 0 0 7%; /* Bottom-Left Circle */
  border-radius: 7% 0 0 0; /* Top-Left Circle */
  }

}


@media (min-width: 1200px) {

  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div.col-lg-pull-6 {
  right: 52%;
  width: 55% !important;
  }

}


@media (min-width: 1900px) {

  /* Two-Columns >> RC_BG >> text-block + col-md- > 統一高度 */
  .Two-Columns .markets-top-banner.richcontent div[class*="text-block"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"], 
  .Two-Columns .markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-"], 
  .Two-Columns .markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-"]  {
  height: 79vh;
  }

}


/* Bowei 筆電寬螢幕 */
@media (min-width: 1281px) and (max-width: 1366px) {


  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"], 
  .Two-Columns .markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-"], 
  .Two-Columns .markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-"] {
  height: 95vh;
  }

  .Two-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::after, 
  .Two-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::after, 
  .Two-Columns.Mask-before-Rich-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-md-5.col-md-offset-1::after, 
  .Two-Columns.Mask-before-Rich-Columns.before-Rich-Columns-Element .markets-top-banner.richcontent .text-block > div.col-lg-pull-6::after {
  font-size: 2em;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  padding: 4.5%;
  }

}




/* iPad */
@media (max-width: 810px) {

  /* Two-Columns >> RC_BG >> text-block > 統一寬度 */
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] {
  width: 100%;
  padding:0;
  }

  /* Two-Columns >> RC_BG >> text-block + col-md(圖文底) > 統一寬度 */
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-md-"], 
  section[class*="Two-Columns"] div.markets-top-banner.richcontent div[class*="text-block"] div[class*="col-lg-"]  {
  width: 100%;
  padding: 12% 5% 8%;
  }

}



















/* ========================================================================================================================
                                             【for Rich Content】

	           (.with-Two-Text-Block) (用程式的方式結合,變一區同時有兩個 .text-block section ) 

      將另一區的 Rich Content Section .text-block 往前移入 上一區 Rich Content .text-block 的下方(之後)

                                (Computex 2024 >> Overview + Event Guide Section)
======================================================================================================================== */


/* 程式第二個 .text-block (兩個以上的 text-block) (程式新增 Event Guide) */
section.with-Two-Text-Block .markets-top-banner.richcontent .text-block + .text-block {
    padding-top: 1% !important;
} 




/* .wording_block::before (兩個以上的 text-block) (程式新增 Event Guide) */
section.with-Two-Text-Block.Scenarios_Photo.Dark_Theme.Brackets .text_block_top-right .wording_block::before, 
section.with-Two-Text-Block.Dark_Theme.Brackets .text_block_top-right .wording_block::before {
content: none !important;
}


/* .img-responsive (兩個以上的 text-block) (程式新增 Event Guide) */
.with-Two-Text-Block .markets-top-banner.richcontent .text_block_top-right img.img-responsive {
    border: none !important;
}




@media (min-width: 992px) {}



@media (min-width: 1200px) {

    /* .col-lg-push-6 (.wording_block 上一層) (兩個以上的 text-block) (程式新增 Event Guide) */
    section.with-Two-Text-Block .text_block_top-right .col-lg-push-6 {
    left: calc(50% - 1.5%);
    }

    /* .col-lg-pull-6 (.image_block 上一層) (兩個以上的 text-block) (程式新增 Event Guide) */
    section.with-Two-Text-Block .text_block_top-right .col-lg-pull-6 {
    right: calc(50% - 0.5%);
    }

    /* .wording_block 撐 .Brackets 高度 (兩個以上的 text-block) (程式新增 Event Guide) 
    section.with-Two-Text-Block.Scenarios_Photo .text-block .wording_block, 
    section.with-Two-Text-Block .text-block .wording_block {
    padding: 5% 0 10%;
    padding: 10% 0 15%;
    }
    */

    /* .wording_block (兩個以上的 text-block) (程式新增 Event Guide) */
    section.with-Two-Text-Block.Scenarios_Photo .text_block_top-right .wording_block, 
    section.with-Two-Text-Block .text_block_top-right .wording_block {
    width: 89%;
    margin-left: -10%;
    }

    /* .wording_block::after (兩個以上的 text-block) (程式新增 Event Guide) */
    section.with-Two-Text-Block.Scenarios_Photo.Dark_Theme.Brackets .text_block_top-right .wording_block::after, 
    section.with-Two-Text-Block.Dark_Theme.Brackets .text_block_top-right .wording_block::after {
    right: -100px;

    transform: rotateX(-180deg);/*上下鏡射相反*/
    width: 45%;
    }

}



@media (min-width: 1920px) {

    /* .col-lg-push-6 (.wording_block 上一層) (兩個以上的 text-block) (程式新增 Event Guide) */
    section.with-Two-Text-Block .text_block_top-right .col-lg-push-6 {
    left: calc(50% - 7%);
    left: calc(50% - 8.5%);
    left: calc(50% - 7.5%);
    }

    /* .col-lg-pull-6 (.image_block 上一層) (兩個以上的 text-block) (程式新增 Event Guide) */
    section.with-Two-Text-Block .text_block_top-right .col-lg-pull-6 {
    right: calc(50% - 1.5%);
    }

    /* .wording_block (兩個以上的 text-block) (程式新增 Event Guide) */
    section.with-Two-Text-Block.Scenarios_Photo .text_block_top-right .wording_block, 
    section.with-Two-Text-Block .text_block_top-right .wording_block {
    width: 70%;
    width: 66%;
    margin-left: 10%;
    }

    /* .wording_block::after (兩個以上的 text-block) (程式新增 Event Guide) */
    section.with-Two-Text-Block.Scenarios_Photo.Dark_Theme.Brackets .text_block_top-right .wording_block::after, 
    section.with-Two-Text-Block.Dark_Theme.Brackets .text_block_top-right .wording_block::after {
    right: -20px;
    right: 25px;
    }

}

















/* =====================================================================================================
                                         【for Rich Content】

   [.Scenarios_Photo.Brackets] >> 有大漸層的左右括號 ::Before + ::After (for Wording Block)

                     (Computex 2024 >> Overview + Event Guide Section)
===================================================================================================== */


/* 橫向智慧手機到竪立平板電腦解析度 >> 1200 以上 */
@media (min-width: 1200px) {

   section.Scenarios_Photo.Brackets .text-block .wording_block, 
   section.Brackets .text-block .wording_block {
   padding: 5% 0 10%;
   padding: 10% 0 15%;
   }

   section.Scenarios_Photo.Brackets.Subtitle-Banner .text-block .wording_block, 
   section.Brackets.Subtitle-Banner .text-block .wording_block {
   padding-top: unset;
   padding-bottom: unset;
   }

   section.Scenarios_Photo.Brackets .wording_block h3, 
   section.Brackets .wording_block h3 {
   margin-top: 0 !important;
   }

   section.Scenarios_Photo.Brackets .wording_block h4, 
   section.Brackets .wording_block h4 {
   margin-bottom: 0 !important;
   }

   section.Scenarios_Photo.Brackets .wording_block::before, 
   section.Scenarios_Photo.Brackets .wording_block::after {
   border: 12px solid #e8ecee;
   border: 7px solid #e8ecee;
   border: 4px solid #e8ecee;
   border: 5px solid #e8ecee;
   }


   /* 【.Brackets >> Color Object】 for .wording_block + .markets-solutions-applications h2(Html) */
   section.Scenarios_Photo.Dark_Theme.Brackets .wording_block::before, 
   section.Scenarios_Photo.Dark_Theme.Brackets .wording_block::after, 
   section.Dark_Theme.Brackets .wording_block::before, 
   section.Dark_Theme.Brackets .wording_block::after, 

   section.Dark_Theme.Brackets div.markets-solutions-applications h2::before, 
   section.Brackets.Dark_Theme div.markets-solutions-applications h2::before,
   section.Dark_Theme.Brackets div.markets-solutions-applications h2::after,  
   section.Brackets.Dark_Theme div.markets-solutions-applications h2::after {
   border: 7px solid rgba(255,255,255,.2);
   border: 4px solid rgba(255,255,255,.2);
   border: 5px solid rgba(255,255,255,.2);

   border-style: solid;
   border-width: 3px;
   border-image-slice: 1;
   border-image-repeat: stretch;

   border-color: rgba(80, 213, 255, 0.99);
   border-image-source: linear-gradient(to right, rgba(245, 35, 255, 0.99), rgba(80, 213, 255, 0.99));
   border-image-source: linear-gradient(15deg, rgba(211, 35, 255, 0.99), rgba(80, 213, 255, 0.99));
   /*box-shadow: 0px 2px 20px -1px rgba(80, 213, 255, 0.99);
   box-shadow: 0px 2px 15px 1px rgba(80, 213, 255, 0.9);*/
   filter: drop-shadow(5px -8px 55px rgba(1,196,255,1.0));

   border-image-source: linear-gradient(10deg, rgba(35, 255, 111, 0.99), rgba(6, 138, 255, 0.99));/*Green*/

   -moz-border-image-source: linear-gradient(10deg, rgba(35, 255, 111, 0.99), rgba(6, 150, 255, 0.99));/*Green*/
   -webkit-border-image-source: linear-gradient(10deg, rgba(35, 255, 111, 0.99), rgba(6, 150, 255, 0.99));/*Green*/
   border-image-source: linear-gradient(10deg, rgba(35, 255, 111, 0.99), rgba(6, 150, 255, 0.99));/*Green*/
   }


   section.Scenarios_Photo.Brackets .wording_block::before {
   border-radius: 5px 0 0 5px;
   left: 30px;
   border-right: 0 !important;
   }


   section.Scenarios_Photo.Brackets .wording_block::after {
   border-radius: 0 5px 5px 0;
   right: 30px;
   border-left: 0 !important;
   }

   section.Scenarios_Photo.Brackets .text-block.text_block_top-left .wording_block::before {
   left: 60px;
   width: 50%;
   height: 120%;
   top: -15%;
   pointer-events: none;

   height: 100%;
   top: -6%;
   }

   section.Scenarios_Photo.Brackets .text-block.text_block_top-left .wording_block::after {
   opacity: 0;
   }


   /* 【.Brackets >> H2】 for .markets-solutions-applications h2 (Html) */
   section.Brackets.Dark_Theme div.markets-solutions-applications h2, 
   section.Dark_Theme.Brackets div.markets-solutions-applications h2 {
   display: inline-block;
   }


   /* 【.Brackets >> Object Style】 for .markets-solutions-applications h2 (Html) */
   section.Dark_Theme.Brackets div.markets-solutions-applications h2::before, 
   section.Brackets.Dark_Theme div.markets-solutions-applications h2::before,
   section.Dark_Theme.Brackets div.markets-solutions-applications h2::after,  
   section.Brackets.Dark_Theme div.markets-solutions-applications h2::after {
   content: '' !important;
   display:inline-block !important;
   position: absolute;
   height: 100%;
   width: 52px;
   top: -5px;
   top: calc(0% - 15%);

   height: 93%;
   width: 40px;
   width: 30px;
   top: calc(0% - 12%);
   }

   /* 【.Brackets >> (Before) Object Style】 for .markets-solutions-applications h2 (Html) */
   section.Dark_Theme.Brackets div.markets-solutions-applications h2::before, 
   section.Brackets.Dark_Theme div.markets-solutions-applications h2::before {
   /*border-radius: 5px 0 0 5px;*/
   border-right: 0 !important;
   margin-left: -53px;
   }

   /* 【.Brackets >> (After) Object Style】 for .markets-solutions-applications h2 (Html) */
   section.Dark_Theme.Brackets div.markets-solutions-applications h2::after, 
   section.Brackets.Dark_Theme div.markets-solutions-applications h2::after {
   /*border-radius: 0 5px 5px 0;*/
   border-left: 0 !important;
   margin-left: 42px;
   margin-left: 14px;
   margin-left: 24px;

   transform: rotateX(-180deg); /* 上下鏡射反轉 */
   }
   

}



/*1920以上 */
@media (min-width: 1920px) {

   section.Scenarios_Photo.Brackets .text-block.text_block_top-left .wording_block::before {
   left: 60px;
   width: 50%;
   height: 130%;
   top: -24%;
   height: 140%;
   top: -32%;
   top: -26%;

   height: 100%;
   top: -6%;
   }

}



@media (min-width: 1367px) and (max-width: 1770px) {

   section.Scenarios_Photo.Brackets .text-block.text_block_top-left .wording_block::before {
   left: 0px !important;
   }

}


/* Bowei 筆電寬螢幕 */
@media (min-width: 1281px) and (max-width: 1366px) {

   section.Scenarios_Photo.Brackets .text-block.text_block_top-left .wording_block::before {
   left: 0px !important;
   }

}















/* =====================================================================================================
                                         【for Rich Content】

                               [.Dark-Banner] >> 圖片區蓋黑透明 

   (Full-Width Banner 才能用 Text Block 遮住 ) + 一般 Rich Content (有 container, 改用 .RC_BG::before 遮)

===================================================================================================== */



/* Banner 圖片區蓋黑透明 >> Full-Width Banner (Full-Width 才能用 Text Block 遮住 ) + 一般 Rich Content (有 container, 改用 .RC_BG::before 遮) */
#parallax_banner.Dark-Banner .markets-top-banner.richcontent .text-block:not(#parallax_banner.Dark-Banner .markets-top-banner.richcontent .container .text-block)/* 只含 Full-Width */, 
#parallax_banner.Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG::before/* 一般 Rich Content */, 

.Dark-Banner .markets-top-banner.richcontent .text-block:not(.Dark-Banner .markets-top-banner.richcontent .container .text-block)/* 只含 Full-Width */, 
.Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG::before/* 一般 Rich Content */ {
    background: -moz-linear-gradient(-45deg, rgba(7, 69, 118,0.5) 0%,rgba(8, 55, 94,0.6) 58%,rgba(7, 69, 118,0.3) 100%) !important;
    background: -webkit-linear-gradient(-45deg, rgba(7, 69, 118,0.5) 0%,rgba(8, 55, 94,0.6) 58%,rgba(7, 69, 118,0.3) 100%) !important;
    background: linear-gradient(135deg, rgba(7, 69, 118,0.5) 0%,rgba(8, 55, 94,0.6) 58%, rgba(7, 69, 118,0.3) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0030a3', endColorstr='#000099e0',GradientType=1 );
}


/* Banner 圖片區蓋黑透明 >> 一般 Rich Content (有 container, 改用 .RC_BG::before 遮) */
#parallax_banner.Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG, 
.Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG {
    position: relative;
    box-sizing: border-box;
    /* overflow: hidden; */
}



/* Banner 圖片區蓋黑透明 >> 一般 Rich Content (有 container, 改用 .RC_BG::before 遮) */
#parallax_banner.Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG::before, 
.Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100vh;
    height: inherit;/* 繼承父元素高度 >> .RC_BG(父元素) 要設為 position: relative; 並給高度才能被子元素繼承 */

    filter: brightness(100%) contrast(110%);
}



/* 1023 以下 */
@media (max-width: 1023px) {

    /* Banner 圖片區蓋黑透明 >> 一般 Rich Content (有 container, 改用 .RC_BG::before 遮) */
    #parallax_banner.Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG, 
    .Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG {
    overflow: hidden;
    }


    /* Banner 圖片區蓋黑透明 >> 一般 Rich Content (有 container, 改用 .RC_BG::before 遮) */
    #parallax_banner.Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG::before, 
    .Dark-Banner .Rich_Content .markets-top-banner.richcontent .RC_BG::before {
    height: 100vh;
    }
}










/* ========================================================================================================================
                                               All  Rich Content
 ======================================================================================================================== */

 .Full_Width_Rich_Content .text_block_top-center .wording_block,
 .Rich_Content .text_block_top-center .wording_block {
     margin-bottom: 30px;
 }
 
 .Rich_Banner .markets-top-banner.richcontent h3.RC_LTitle,
 .Rich_Des .markets-top-banner.richcontent h3.RC_LTitle {
     font-weight: 300 !important;
 }
 
 #RC_Banner .markets-top-banner.richcontent h3.RC_LTitle {
     font-size: 3.5em;
     font-weight: 300;
     line-height: 58px;
     letter-spacing: -0.01em;
 }
 
 div.markets-top-banner.richcontent h3.color_white span {
     color: rgba(255, 255, 255, 1.0);
 }

 [class*="Rich_Content"] .text-block .wording_block h3 small {
   line-height: 1.4em;
   display: inline-block;
 }
 
 
 /* Rich Content >> h4 文字說明 */

 .markets-top-banner.richcontent [class*="color_"]h4:not(#Overview-Intro .wording_block h4),
 div.markets-solutions-applications h4:not(#Overview-Intro .wording_block h4) {
     font-weight: 400 !important;
     /*opacity: 0.55 !important;*/
     opacity: 1.0;
     opacity: 0.85;
     margin-bottom: 20px;
 }
 
 div.markets-top-banner.richcontent h4.color_white {
     color: rgba(255, 255, 255, 0.85);
 }
 
 
 /* 背景圖後+冷灰漸層 */
 
 #RC_Content-1 .RC_BG {
     /*background-image: url('//assets.aten.com/webpage/shared/campaign/global/Event/UC9040/Rich_Content-1_Image_Banner.png'), -moz-radial-gradient(center, ellipse cover, #fff 0%, #d2dbdf 84%) !important;
      background-image: url('//assets.aten.com/webpage/shared/campaign/global/Event/UC9040/Rich_Content-1_Image_Banner.png'), -webkit-radial-gradient(center, ellipse cover, #fff 0%, #d2dbdf 84%) !important;
      background-image: url('//assets.aten.com/webpage/shared/campaign/global/Event/UC9040/Rich_Content-1_Image_Banner.png'), radial-gradient(center, ellipse cover, #fff 0%, #d2dbdf 84%) !important;*/
 }
 
 
 /* 背景圖後+暖灰漸層 
      #RC_Content-1 .RC_BG {
      background-image: url('//assets.aten.com/webpage/shared/campaign/global/Event/UC9040/Rich_Content-1_Image_Banner.png'), -moz-radial-gradient(center, ellipse cover, #fff 0%, #dde1e1 84%) !important;
      background-image: url('//assets.aten.com/webpage/shared/campaign/global/Event/UC9040/Rich_Content-1_Image_Banner.png'), -webkit-radial-gradient(center, ellipse cover, #fff 0%, #dde1e1 84%) !important;
      background-image: url('//assets.aten.com/webpage/shared/campaign/global/Event/UC9040/Rich_Content-1_Image_Banner.png'), radial-gradient(center, ellipse cover, #fff 0%, #dde1e1 84%) !important;
      }*/
 
 
 /* RC_Banner >> Shop Banner */
 
 #RC_Banner.Shop_Banner .Full_Width_Rich_Content .text_block_top-center .wording_block,
 #RC_Banner.Shop_Banner .Rich_Content .text_block_top-center .wording_block {
     margin-bottom: 0px;
 }
 
 



/* 客製化 >> Rich Content > 所有文字區 >> 左下斜角 */
.Corners-Diagonal_Let-Bottom_Clip-Path [class*="Rich_Content"] [class*="text_block_"] .wording_block {
   position: relative;
   overflow: hidden;
   padding: 3% 9%;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 90%);
   clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 90%);
   clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%, 0 90%);

   background-color: transparent;
   backdrop-filter: blur(3px);
}

/* 客製化 >> Rich Content > 文字區(左右) >> 左下斜角 */
.Corners-Diagonal_Let-Bottom_Clip-Path [class*="Rich_Content"] .text_block_top-right .wording_block, 
.Corners-Diagonal_Let-Bottom_Clip-Path [class*="Rich_Content"] .text_block_top-left .wording_block {
}




/* Video 影片下方多出高度 */
#parallax_bannerM1_main_visual_vid, 
[id*="_main_visual_vid"] {
   display: block;
   line-height: 0;
}




/* ========================================================================================================================
                                                             RWD (Rich Content) 
======================================================================================================================== */


/* 1024 以上 */
@media (min-width: 1024px) {

   /* 客製化 (方形內鋪小圓點/ All) >> Rich Content > 文字區(All) */
   .Dot-Square .markets-top-banner.richcontent .text-block .col-lg-push-6.col-md-push-5::after, 
   .Dot-Square .markets-top-banner.richcontent .text-block .col-md-5.col-sm-12::after {
   background-image: radial-gradient(#dee1e0 15%,transparent 25%);
   background-image: radial-gradient(rgba(222, 224, 225, 0.85) 15%,transparent 25%);
   background-size: 9px 9px;
   background-size: 10px 10px;
   content: "";
   position: absolute;
   width: 204px;
   height: 200px;
   z-index: 0;

   top: -63px;
   }

   /* 客製化 (方形內鋪小圓點/ 右上) >> Rich Content > 文字區(右) */
   .Dot-Square.Dot-Right-Top .markets-top-banner.richcontent .text-block.text_block_top-right .col-lg-push-6.col-md-push-5::after, 
   .Dot-Square .markets-top-banner.richcontent .text-block.text_block_top-right .col-lg-push-6.col-md-push-5::after {
   right: -36px;
   top: -63px;
   }

   /* 客製化 (方形內鋪小圓點/ 左上) >> Rich Content > 文字區(左) */
   .Dot-Square.Dot-Left-Top .markets-top-banner.richcontent .text-block.text_block_top-left .col-md-5.col-sm-12::after, 
   .Dot-Square .markets-top-banner.richcontent .text-block.text_block_top-left .col-md-5.col-sm-12::after  {
   left: -36px;
   top: -63px;
   }


   [class*="Rich_Content"] .text-block .wording_block h3 small {
   font-size: 60%;
   font-size: 55%;
   }

   /* 綠色裝飾點 (左右) >> 文字區有斜角 + 底色塊 >> 文字 + 圖片浮起到上層 >> 跨區 */
   section[class*="Corners-Diagonal_"] .markets-top-banner.richcontent .text-block[class*="text_block_"] .col-md-5.col-sm-12::before, 
   section[class*="Corners-Diagonal_"] .markets-top-banner.richcontent .text-block[class*="text_block_"] .col-lg-push-6.col-md-push-5::before {
   content: "";
   position: absolute;
   z-index: 2;
   background-color: #94c52d;
   background-color: rgba(148, 197, 45, 1.0);
   width: 35px;
   height: 35px;
   left: -2px;
   top: 22px;
   }

   /* 綠色裝飾點 (左右) >> 文字區有斜角 + 底色塊 >> 文字 + 圖片浮起到上層 >> 跨區 */
   section.Screen-Frame-Banner[class*="Corners-Diagonal_"] .markets-top-banner.richcontent .text-block[class*="text_block_"] .col-md-5.col-sm-12::before, 
   section.Screen-Frame-Banner[class*="Corners-Diagonal_"] .markets-top-banner.richcontent .text-block[class*="text_block_"] .col-lg-push-6.col-md-push-5::before {
   z-index: 3 !important;
   }


}












/* ========================================================================================================================
                                                             RWD (Others) 
======================================================================================================================== */
 
 
 /* 橫向智慧手機到竪立平板電腦解析度 >> 767 以下 */
 
 @media (max-width: 767px) {}
 
 
 /* 一般pc小螢幕 */
 
 @media (min-width: 980px) and (max-width: 1199px) {}
 
 
 /* 1100 以上 */
 @media (min-width: 1100px) {}
 
 
 /* 1024 以上 */
 @media (min-width: 1024px) {}
 
 /*  1500 以上 */
 @media (min-width: 1500px) {}
 
 /* 寬電腦解析度 >> 2000 以上 */
 @media (min-width: 2000px) {}
 
 /* 寬電腦解析度 >> 2034 以上 */
 @media (min-width: 2034px) {}
 
 
 /* 大螢幕 */
 @media (min-width: 1905px) and (max-width: 2100px) {}
 
 
 /* 大螢幕 */
 @media (min-width: 1200px) and (max-width: 1920px) {}
 
 
 /* 大螢幕 */
 @media (min-width: 1200px) and (max-width: 1900px) {}
 
 
 /* Bowei 筆電寬螢幕 */
 @media (min-width: 1281px) and (max-width: 1366px) {}
 
 
 /* 寬螢幕 */
 @media (min-width: 1400px) and (max-width: 1500px) {}
 
 
 /*  1405 以下 */
 @media (max-width: 1405px) {}
 
 
 /* 1300 以下 */
 @media (max-width: 1300px) {}
 
 
 /*  1270 以下 */
 @media (max-width: 1270px) {}
 
 
 /*  1180 以下 */
 @media (max-width: 1180px) {}
 
 
 /*  1038 以下 */
 @media (max-width: 1038px) {}
 
 
 /*  1023 以下 */
 @media (max-width: 1023px) {}
 
 
 /* 寬電腦解析度 >> 1006 以下 */
 @media (max-width: 1006px) {}
 
 
 /* 橫向智慧手機到竪立平板電腦解析度 >> 970 以下 */
 @media (max-width: 970px) {}
 
 
 /* 橫向智慧手機到竪立平板電腦解析度 >> 959 以下 */
 @media (max-width: 959px) {}
 
 
 /* 平板電腦、橫向手機和一般桌機解析度 */
 @media (min-width: 768px) and (max-width: 979px) {}
 
 
 /* 橫向智慧手機到竪立平板電腦解析度 >> 900 以下 */
 @media (max-width: 900px) {}
 
 
 /* 橫向智慧手機到竪立平板電腦解析度 >> 750 以下 */
 @media (max-width: 750px) {}
 
 
 /* 橫向智慧手機到竪立平板電腦解析度 >> 736 以下 */
 @media (max-width: 736px) {}
 
 
 /* 比手機大-比平板小-解析度 */
 @media (min-width: 481px) and (max-width: 600px) {}
 
 
 /* iPhone 6 & 6 plus > 4.7吋--手機及其他更小解析度 */
 @media (min-width: 373px) and (max-width: 414px) {}
 
 
 /* 橫向智慧手機及其他更小解析度 */
 @media (max-width: 480px) {}
 
 @media (max-width: 460px) {}
 
 
 /* 472 以下 */
 
 @media (max-width: 472px) {}