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

body{

background: #f6f6f6;

    
/*滾動條設定 OPEN*/

/* 主滾動條容器 (Chrome/Safari/Edge) */
::-webkit-scrollbar {
  width: 6px;  /* 最小寬度 (豎直滾動條) */
  height: 6px; /* 最小高度 (水平滾動條) */
}

/* 滾動條軌道 */
::-webkit-scrollbar-track {
  background: #fab915; /* 黃色背景 */
}

/* 滾動條滑塊 */
::-webkit-scrollbar-thumb {
  background: #fab915;  /* 淺黃色滑塊 */
  border-radius: 3px;
}

/* 上下箭頭按鈕 */
::-webkit-scrollbar-button:single-button {
  background-color: #f8e8c1; /* 黃色背景 */
  display: block;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  height: 6px; /* 與滾動條同寬 */
}

/* 向上箭頭 */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'><polygon points='3,0 6,3 0,3' fill='white'/></svg>");
}

/* 向下箭頭 */
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'><polygon points='3,3 6,0 0,0' fill='white'/></svg>");
}

/* Firefox 支援 */
* {
  scrollbar-width: thin;          /* 最小化滾動條 */
  scrollbar-color: #fab915 #f8e8c1; /* 滑塊顏色 軌道顏色 */
}
/*滾動條設定 END*/

}

.body_vas_bg_2024{
   
        position: relative;
    display: block;
    padding: 0px 0 15px;
	
	background-image: url(/TDWorld/r/cms/www/red_h5/assets/css/sun_2024/images/esim_bg.jpg);
	background-position:left 0px;
	background-repeat:no-repeat;
    min-height: 800px;
    
/*background: #f6f6f6;*/
    
}
.width_set{
max-width: 1586px;margin: 0px auto;text-align: left;padding: 10px;
}

.align_set{
text-align: center;
padding-left: 0px;
padding-bottom: 20px;
}


.mCSB_container{
height:1600px;
}

.radius_set{
border-radius: 25px;
    margin-bottom: 0px;
}
/* 右上角圓角 TAG */
.floating-trigon {
    position: absolute;
    top: 0px;
    right: 12px;
    /*! width: 80px; */
    /*! height:40px; */
    
    color: white;
    overflow: hidden;   
    z-index: 2;     
      
      margin-top:0px;
    padding-top: 1px;
  text-align:center;
  }

 
  .floating-trigon::after {
    content: '';
    position: absolute;
    width: 100%;       
    height: 100%;
    background: #ff6c02;
    transform: rotate(0deg) translate(0%, 0%);
    border-radius: 0px 20px 0px 20px; 
    left: 0;
    bottom: 0;
      
  }


  .floating-trigon span {
    position: relative; 
    z-index: 1;
    display: block;
    padding: 3px 18px 6px 18px;
     transform: rotate(0deg) translate(0%, 0%); 
    font-size: 20px;
  }

  .floating-trigon a {
  
    font-size: 20px;
  }

.set_padding_top{
margin-top: 100px;

}
	
.modal-backdrop{

z-index: 9999999;
}

.modal-backdrop.in{

z-index: 9999999;
}


	
	.modal-content{
		
box-shadow: 0px 0px 10px #666666;

		padding: 15px;
		margin-bottom: 100px;
		overflow:auto;
		height:650px;
        margin-left:7%;
        margin-right:7%;
        
		
}
	.set_close{

    cursor: pointer;
    float: right;
    position: absolute;
    z-index: 1111;
    right: 6.3%;
    margin-top: -15px;
}
	
	.set_close_img{
    max-width:45px;
}

.table_set{
border-radius: 15px;
padding: 0px;
background: #ffffff;
border: 1px solid #f6f6f6;
     overflow: hidden;
    
}
.table_set_in{
    width: 100%;
border-collapse: collapse; /* 合并单元格边框 */
    
}

.table_set_in ul{
    margin-left: -20px;
    padding-top:10px;
    }
.table_set_in li{
    list-style-type: disc;
    }


/* 多列并排同高 */
.table_set02{
width: 100%;
border-radius: 25px;
padding: 15px;
background: #f8f8f8;
border: 0px solid #FF6B00;
margin-bottom: 10px; 
    
}

 .equal-height-container {
            display: flex;
            flex-wrap: wrap;
        }
        
        .col-equal {
            display: flex;
            padding-bottom: 15px;
        }
        
                
        /* 响应式调整 */
        @media (max-width: 991px) {
            .equal-height-container {
                display: block;
            }
            
            .col-equal {
                width: 100%;
                display: block;
                margin-bottom: 15px;
            }
        }

/* 多列并排同高 END */

.td_hang_a_last{
background: #ffffff;
border-bottom: 0px solid #f6f6f6;
padding: 8px;
}

.td_hang_a_last .line{
color:#FF6B00;

}

.td_hang_b_first{

background: #f6f6f6;
border-bottom: 0px solid #f6f6f6;
padding: 8px;
}

.td_hang_b_first .line{
color:#FF6B00;

}

.esim_icon{
width:60px;
    padding: 10px;

}


.new_title01{
font-size:24px;color:#000000;text-align:left;line-height:150%;font-weight: bold;
}

.new_title02{
font-size:20px;color:#FF6B00;text-align:left;line-height:150%;
}

.new_title03{
font-size:20px;color:#000000;font-weight: bold;text-align:left;line-height:150%;
}

.new_content_line{
font-size:16px;color:#000000;font-weight: normal;line-height:160%;
}
.new_content{
font-size:20px;color:#444444;line-height:160%;
}


.new_foot{
font-size:18px;color:#dddddd;line-height:180%;margin-top:20px;margin-bottom:20px;
}

.new_foot a{
font-size:18px;
}

.new_foot b{
font-size:19px;color:#ffffff;font-weight: bold;
}

.foot_icon{
margin-right:25px;
height:30px;
}

.foot_dl_icon{
margin-right:15px;
margin-bottom:5px;
height:48px;
}

@media (max-width: 767px) {
    
    .floating-trigon {
    right: 0px;

  
  }
    
    	.set_padding_top{
margin-top: 120px;

}
	

	.modal-content{
		
box-shadow: 0px 0px 10px #666666;

		height:560px;
		margin-left:3%;
        margin-right:3%;
}
	
.set_close{right: 2.5%;}
.set_close_img{max-width:35px;}
		
}

    
    .foot_dl_icon{
margin-right:10px;
height:33px;
}
    
    .align_set{
text-align: center;

}
    
    }

.new_button01{

background: linear-gradient(222.46deg, #F7D0B2 5.82%, #FF5D00 100%);
border-radius: 20px;
    width: 90%;
    max-width:300px;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    font-size:18px;
    margin:0px auto;
        
}

.new_button01 a{

 color: #ffffff;
    
}

.new_button01 a:hover{

 color: #ffffff;
    
}


/* Gradient/2 */
.box01{
    position: absolute;
    top: 150px;
    width:90%;
    height:300px;
    color: #ffffff;
    text-align: center;
background: linear-gradient(222.46deg, #F7D0B2 5.82%, #FF5D00 100%);
border-radius: 25px;
    
    
}

/* Frame 68317 */
.box02{
position: absolute;
width:90%;
height: 563px;
left: 20px;
top: 507px;

background: #FFFFFF;
border-radius: 24px;
}

/* Header/Expand/Service */
.box03{
position: absolute;
width:100%;
height: 127px;
left: 0px;
top: 0px;

background: #FFFFFF;
border-radius: 0px 0px 24px 24px;
}

/* Ellipse 18 */
.box04{
position: absolute;
width: 90%;
height: 636px;
top: 800px;
left: 20%;
overflow-x:hidden;
background: radial-gradient(76.7% 76.7% at 82.16% 80.23%, #FF6B00 0%, rgba(255, 179, 98, 0.8) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
filter: blur(250px);
    
}


/* Main(Desktop) */

/* Auto layout */
.box05{
    position: absolute;
    top: 2200px;
background: #FF6B00;
border-radius: 25px;
    width: 90%;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    font-size:30px;
}

/* Auto layout */
.box06{
    position: absolute;
    top: 2500px;
background: linear-gradient(222.46deg, #F7D0B2 5.82%, #FF5D00 100%);
border-radius: 25px;
    width: 90%;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    font-size:30px;
}


/* Content */
.box07{
position: relative;
overflow: hidden;
width: 100%;
height: auto;
min-height: 370px;
background: #0E0E0E;
border-radius: 0px 0px 40px 40px;
margin-bottom:10px;
color:#dddddd;
padding:10px;
}


/* Ellipse 18 */
.box077{
position: absolute;
width: 50%;
height: 40%;
right: 30px;
bottom: 30px;
background: radial-gradient(76.7% 76.7% at 82.16% 80.23%, #FF6B00 0%, rgba(255, 179, 98, 0.8) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
filter: blur(150px);
   
}

.greenBg {
    position: absolute;
    top: 4000px;
  width:100%;
  height:700px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(266.5deg,#97ef9b -17.54%,#116952 90.9%);
  border:0
}
.greenBg .moovGreenBlurBg {
  position:absolute;
  background:linear-gradient(77.36deg,rgba(165,249,162,.7) 36.57%,rgba(229,248,230,.56) 87.49%);
  filter:blur(200px)
}
.greenBg .moovGreenBlurBg.moovGreenBlur1 {
  left:59.65%;
  right:8.73%;
  top:74.67%;
  bottom:-59.94%;
  transform:matrix(-.55,-.83,.83,-.55,0,0)
}
.greenBg .moovGreenBlurBg.moovGreenBlur2 {
  left:30.9%;
  right:37.49%;
  top:102.63%;
  bottom:-87.9%;
  transform:matrix(-.79,.61,-.61,-.79,0,0)
}
.greenBg .moovGreenBlurBg.moovGreenBlur3 {
  left:83.63%;
  right:-17.29%;
  top:145.41%;
  bottom:-139.22%;
  transform:matrix(-.19,-.98,.98,-.19,0,0)
}
.greenBg .moovGreenBlurBg.moovGreenBlur4 {
  left:35.87%;
  right:41.99%;
  top:40.37%;
  bottom:-2.05%;
  transform:matrix(-.88,-.47,.47,-.88,0,0)
}
.dim {
  background:rgba(0,0,0,.15)
}
.dim,
.noise {
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:1020;
  -webkit-transform:translateZ(0);
  mix-blend-mode:overlay
}
.noise {
  box-sizing:border-box;
  background:url(https://5g.sunmobile.com.hk/assets/noise.png); 
  opacity:.5;
  border:1px solid #000;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))
}
.grayBg {
  box-sizing:border-box;
  height:auto;
  background:#f6f6f6
}
.grayBg,
.roamingWrapper {
  width:100%;
  position:relative;
  overflow:hidden
}



.whiteButton {
  background:#fff;
  border-radius:53px;
  font-weight:700;
  font-size:18px;
  line-height:150%;
  color:#3e3e3e;
  max-width:210px
}
.whiteButton:hover {
  background:linear-gradient(226deg,#f7d0b2,#ff5d00);
  color:#fff;
  transition:.3s
}
.whiteButtonOrangeBorder {
  background:#fff;
  border-radius:53px;
  font-weight:700;
  font-size:18px;
  line-height:150%;
  border:2px solid #ff6b00;
  color:#ff6b00
}
.whiteButtonOrangeBorder:hover {
  background:linear-gradient(226deg,#f7d0b2,#ff5d00);
  color:#fff;
  transition:.3s
}
.whiteButtonBlackBorder {
  background:#fff;
  border-radius:53px;
  border:2px solid #000;
  color:#000
}
.orangeButton,
.whiteButtonBlackBorder {
  font-weight:700;
  font-size:18px;
  line-height:150%
}
.orangeButton {
  background:linear-gradient(226deg,#f7d0b2,#ff5d00);
  border-radius:53px;
  border:0;
  color:#fff
}
.orangeButton:hover {
  background:linear-gradient(227deg,#f7d0b2 18.53%,#ff5d00 69.1%);
  transition:.5s
}