*{font-family:'Noto Sans TC','微軟正黑體';}
*,*::before,*::after{margin:0px; padding:0px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.clearfix:after{content:''; display:block; height:0; clear:both; visibility:hidden;}
hr{margin:20px 0px;}
pre{border:2px solid deeppink; padding:5px; margin:2px; font-size:12px; background:rgba(255,255,255,0.7); clear:both; font-size:12px; font-family:'Source Code Pro';}
pre strong{color:#c00;}
pre em{font-style:normal; font-weight:bold; color:#006600;}
body{font-size: 14px;}
.wrapper{ width:100%; margin:0 auto;}
a:link, a:visited {text-decoration: none;color: #3e83bd;}
ul,li{list-style: none;padding: 0;margin: 0; }
body{font-size: 14px;}
html{}


/* ================ Header ================ */
.header_box {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;  
  background:#ffffff; 
  padding: 15px 20px 15px 35px;
}
.header_box a.logo_NS{
   display:block; 
   width:180px; 
   height: 38px;
   background:url("../images/NS_logo.png") no-repeat left center/100% auto;
   text-indent: -9999px;
}

.header_box ul li{
   display: inline-block;
   font-size: 15px;
} 

.header_box ul li:first-child{
   display: inline-block;
   margin-right:10px;
   border-right: 2px solid #3e83bd;
   line-height: 1;
}
.header_box ul li a{
   color: #3e83bd;
   font-size: 20px;
   font-weight: 500;
   letter-spacing: 0.03em;
   margin-right:10px;
}
.header_box ul li a:hover{color: #3c95dd;}
/*990px*/
@media only screen and (max-width:990px){
   .header_box a.logo_NS{width:150px;}
}

/*768px*/
@media only screen and (max-width:768px){
   .header_box { padding: 10px 5px 10px 30px;}
   .header_box a.logo_NS{width:140px;}
   .header_box ul li a{font-size: 16px;}
}
/*676px*/
@media only screen and (max-width:676px){
   .header_box { padding: 5px 10px 5px 20px;}
}
/*414px*/
@media only screen and (max-width:414px){
   .header_box { padding: 0 5px 0px 15px;}
   .header_box a.logo_NS{width:110px;height: 36px;}
   .header_box ul li a{font-size: 14px;}
}
/*375px*/
@media only screen and (max-width:375px){
   .header_box { padding: 2px 0px 0px 5px;}
   .header_box ul li a{font-size: 13px;}
}


/* ================ kv_part ================ */
.kv_part {
   position: relative;
   overflow: hidden;
   display: block;
   z-index: 1;
   margin: 0 auto;
   padding-bottom: 20px;
   background: url("../images/bg1.png") no-repeat center bottom;
   background-size: cover;
}

/*1200px*/
@media only screen and (max-width:1200px){
  .kv_part{background: url("../images/bg1_Large.png") no-repeat center bottom;} 
}
/*414px*/
@media only screen and (max-width:414px){
  .kv_part{background: url("../images/bg1_mb.png") no-repeat center bottom;} 
}


.kv_part .mb{display: none;}/*初始隱藏*/
.kv_part img{
   display: block;
   width: 100%;
   height: auto;
}
/*kv_part .slogan 大標*/
.kv_part .slogan{
   width: 45%;
   height: 0;
   padding-bottom: 30%;
   position: absolute;
   top:8%;
   left: 26%;
   background:url("../images/kv_slogan.png") no-repeat left center/100% auto;
   filter: drop-shadow(0 0 10px rgba(116,120,178,.8))
         drop-shadow(0 0 20px rgba(116,120,178,.6));
   animation: glow 2s ease-in-out infinite alternate;
   animation: zoomLoop 2s ease-in-out infinite;
}
@keyframes glow{
    from{
        filter: drop-shadow(0 0 10px rgba(96, 117, 238, 0.5));
    }
    to{
        filter: drop-shadow(0 0 25px rgb(74, 77, 121));
    }
}

@keyframes zoomLoop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); 
  }
  100% {
    transform: scale(1);
  }
}

.kv_part .ghost1{
   width: 13%;
   height: 0;
   padding-bottom: 16%;
   position: absolute;
   top:40%;
   left: 24%;
   background:url("../images/ghost1.png") no-repeat left center/100% auto;
   /* 動畫 */
   animation: ghostMoveX 5s ease-in-out infinite;
}

@keyframes ghostMoveX {
   0% {
      transform: translateX(0);
   }
   50% {
      transform: translateX(20px);
   }
   100% {
      transform: translateX(0);
   }
}
.kv_part .ghost2{
   width: 11%;
   height: 0;
   padding-bottom: 22%;
   position: absolute;
   top:34%;
   right: 20%;
   background-size: 100% auto;
   background:url("../images/ghost2.png") no-repeat left center/100% auto;
   /* 動畫 */
   transform-origin: 50% 95%;
   animation: ghostSwing 5s ease-in-out infinite;
}
@keyframes ghostSwing {
   0% {
      transform: translateY(0) rotate(-6deg);
   }
   50% {
      transform: translateY(-10px) rotate(4deg);
   }
   100% {
      transform: translateY(0) rotate(-6deg);
   }
}
/*客製化 7月*/
.kv_part .ghost1.July{
   top:30%;
}
.kv_part .ghost2.July{
   top:25%;
}

/*h3 文字樣式大標*/
.kv_part .title h3{
   font-size: clamp(38px, 4vw, 52px);
   font-weight: 600;
   color: #4d52a6;
   -webkit-text-stroke: 6px #ffffff;
   paint-order: stroke fill;
   text-align: center;
   filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.kv_part .title span{
   font-weight: 900;
}
.kv_part .story{
   margin-top: 30px;
   text-align: center;
   font-size: clamp(16px, 4vw, 20px);
   font-weight: bold;
   color: #403625;
}
.kv_part a.btn-go{
   display: block;
   margin:0 auto;
   width: 350px;
   height: 0%;
   padding-bottom: 150px;
   background: url("../images/btn_go.png")no-repeat left center/100% auto;
   text-indent:110%;
   white-space: nowrap;
   overflow: hidden;
   transition: transform .3s ease, filter .3s ease;
} 
.kv_part a.btn-go:hover{
    transform: scale(1.1);
    filter: brightness(1.2);
}

/*1200px*/
@media only screen and (max-width:1200px){
   /*KT*/
  .kv_part img.pc{display: none;}
  .kv_part img.mb{display: block;}
  .kv_part .slogan{width: 72%;padding-bottom: 40%;left: 16%;top:8%;
   background: url(../images/kv_title_mb@2x.png)no-repeat left center/100% auto;}
  .kv_part .ghost1{display: none;}
  .kv_part .ghost2{ width:20%;padding-bottom: 25%; top: 32%; right: 80px; background:url("../images/mb_g.png") no-repeat left center/100% auto;}
}


/*768px*/
@media only screen and (max-width:768px){
   .kv_part .title h3{font-size: 32px;}
   /*七月客製化*/
   .kv_part .ghost2.July{top: 22%;}
}

/*414px*/
@media only screen and (max-width:414px){
  .kv_part .title h3{font-size: 24px;margin-bottom: 20px;}
  .kv_part .ghost2{ width: 20%; top: 30%; right: 60px; background:url("../images/mb_g.png") no-repeat left center/100% auto;}
  .kv_part .story{margin-top:0px;}
  .kv_part a.btn-go{ width: 65%;padding-bottom: 17%;}
}
/*375px*/
@media only screen and (max-width:375px){
   .kv_part a.btn-go{ width: 80%;padding-bottom:26%;}
  
}


/* ================ content ================ */
.content{}


/* ================ part section_1 ================ */
.part.section_1{
   background: #dfe2fc url(../images/bg2.png) no-repeat;
   background-size: cover;
   background-size: 100% auto;
   padding-bottom: 20px;
}
/*=============== cp_card1 ===============*/
.cp_card1{
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   display:flex; 
   flex-wrap:wrap; 
   justify-content:space-between; 
   align-content:flex-start;
   align-items: center;
}
/*=============== col_1 ===============*/
.cp_card1 .col_1{
   width: 50%;
   display:flex; 
   flex-direction:column; 
   justify-content:center;
   align-items:center;
}

.cp_card1 .col_1 .tip{
   margin-bottom: 10px;
   font-size: clamp(16px, 4vw, 22px);
   font-weight: 600;
   color: #d581ed;
   -webkit-text-stroke: 1px #ffffff;
   paint-order: stroke fill;
   text-align: center;
   filter: drop-shadow(0 2px 2px rgb(255, 255, 255));
}
.cp_card1 .col_1 .title{
   margin-bottom: 20px;
}
.cp_card1 .col_1 .title img{
   display: block;
   width: 100%;
   max-width: 400px;
   height: auto;
}
.cp_card1 .col_1 .summery{
   text-align: center;
   font-size: clamp(16px, 4vw, 18px);
   font-weight: 600;
   line-height: 30px;
}
.cp_card1 .col_1 .summery  b.line-text{
   font-weight: 800;
   border-bottom: 2px solid #d581ed; /* 底線顏色 */
   padding-bottom: 1px;
}
span.line{
   color: #31c061;
   font-weight: 600;
   -webkit-text-stroke: 3px #ffffff;
   paint-order: stroke fill;
}
/*每月數量有限，送完為止 */
.cp_card1 .col_1 .summery .divider-text{
   display: flex;
   align-items: center;
   justify-content: center;
   color: #7a4bd6;
   font-weight: 600;
}

.cp_card1 .col_1 .divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: #8f5abc;
  font-size: 16px;
  width: 55%; 
  margin-bottom: 30px ;
  font-weight: 700;
}

.divider-text::before,
.divider-text::after {
  content: "";
  height: 1px;    
  background: #8f5abc;
  flex: 1;
}

.divider-text::before {
  margin-right: 5px;
}

.divider-text::after {
  margin-left: 5px;
}
/*1200px*/
@media only screen and (max-width:1200px){
   .cp_card1{ flex-direction: column;align-content: center;}
   .cp_card1 .col_1{width: 80%; margin-top: 40px;}
   /*part section_1*/
  .part.section_1{background: #dfe2fc url(../images/bg2_mb.png) no-repeat; background-size: cover;
   background-size: 100% auto;}
  .cp_card1 .col_1 .divider-text{width: 45%;}
}
/*768px*/
@media only screen and (max-width:768px){
  .cp_card1 .col_1 .divider-text{width: 70%;}
}
/*414px*/
@media only screen and (max-width:414px){
  .cp_card1 .col_1{width: 90%;margin-top: 20px;}
  .cp_card1 .col_1 .divider-text {width: 90%;}
}

/*=================== .kv_part .part section_1 客製化7月 ===================*/
.kv_part .section_1{
   background:none;
}
.kv_part  .part .section_1 {
   background:none;
   border:2px solid gold; 
}
.kv_part .part.section_1 .part{
   height: 290px;
   background: url(../images/pic_7.png) no-repeat left center / 100% auto;
}
.kv_part .part.section_1 .part .info{
   bottom: 30px;
}
.kv_part  .part.section_1 .part .summary{
   margin-bottom: 10px;
} 

.kv_part  .part.section_1 .part .summary p{
   font-size: clamp(14px, 4vw, 18px);
}

.kv_part .part.section_1 .part .playBtn{
   width: 60%;
   margin: 0 auto;
}
.kv_part .part.section_1 .part .playBtn a.btn-go{
   width: 100%;
   margin-right: 20px;
}
.kv_part .part.section_1 .part .playBtn a.btn-line{
   width: 100%;
}

/*768px */
@media only screen and (max-width:768px){
   /*新朋友小確幸*/
   .kv_part .part.section_1 .part{ 
      background: url(../images/pic_mb.png) no-repeat left center / 100% auto;
      max-width: 500px;
      height: 500px;
   }
   .kv_part .part.section_1 .part .info{
      bottom:60px;
   }
   .kv_part .part.section_1 .part .summary p{
      font-weight: 500;
      font-size: clamp(16px, 4vw, 24px);
      margin-bottom: 0rem;
   }
   .kv_part .part.section_1 .part .playBtn a.btn-go {
       padding-bottom: 18%;
   }
   .kv_part .part.section_1 .part .playBtn a.btn-line {
       padding-bottom: 18%;
   }
}
/*450px */
@media only screen and (max-width:450px){
   /*新朋友小確幸*/
   .kv_part .part.section_1 .part{
      height: 450px;
      margin-bottom: 0px;
   }
   .kv_part .part.section_1 .part .info{bottom:15%;}
   .kv_part .part.section_1 .part .summary{
      margin-bottom: 10px;
   }
   .kv_part .part.section_1 .part .summary p{
      font-weight: 500;
      font-size: clamp(14px, 4vw, 24px);
     
   }
   .kv_part .part.section_1 .part .playBtn a.btn-go {
       padding-bottom: 15%;
   }
   .kv_part .part.section_1 .part .playBtn a.btn-line {
       padding-bottom: 15%;
   }
}
/*375px */
@media only screen and (max-width:375px){
   /*新朋友小確幸*/
   .kv_part .part.section_1 .part{ height: 355px;}
   .kv_part .part.section_1 .part .info{bottom:15%;line-height: 1.5;}
   .kv_part .part.section_1 .part .summary{font-size: 12px;line-height: 1.4rem;}
}
/*=============== playBtn ===============*/
.cp_card1 .col_2 .playBtn{display: none;}
.cp_card1 .playBtn{
   width: 100%;
   display:flex; 
   flex-direction: row;
   justify-content:center; align-items:center;
}
.cp_card1 .playBtn a.btn-go{
   width: 40%;
  display: inline-block;
  padding: 10px 32px;
  margin-right: 15px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(180deg, #39a9ff 0%, #5cb6fd 100%);
  border-radius: 999px;
  border: 2px solid #7ed6ff;
  transition: all 0.2s ease;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.cp_card1 .playBtn  a.btn-go:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 14px rgba(170, 169, 169, 0.2),
    inset 0 1px 3px rgba(255, 255, 255, 0.5);
  transform: scale(1.08);   
}

.cp_card1 .playBtn  a.btn-go:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.2) inset;
}
.cp_card1 .playBtn a.btn-line{
  display: inline-block;
  padding: 10px 32px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(180deg, #ff6fd1 0%, #ff67a7 100%);
  border-radius: 999px;
  transition: all 0.2s ease;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  border:2px solid #ffa2d7; 
}

.cp_card1 .playBtn a.btn-line:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 14px rgba(170, 169, 169, 0.2),
    inset 0 1px 3px rgba(255, 255, 255, 0.5);
  transform: scale(1.08);   
}

.cp_card1 .playBtn a.btn-line:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.2) inset;
}


/*=============== col_2 ===============*/
.cp_card1 .col_2{
   width: 50%;
   margin-top: 40px;
}

.cp_card1 .col_2 p.pic{
   width: 100%;
   position: relative;
}
.cp_card1 .col_2 p.pic::after{
   content: "";
   display: block;
   width: 100%;
   padding-bottom: 100%;
}
.cp_card1 .col_2 p.pic img{
   display: block;
   width: auto;
   height: 100%;
   object-fit: cover;
   position: absolute;
}

/*1200px*/
@media only screen and (max-width:1200px){
  .cp_card1 .col_1 .playBtn{display: none;}
  .cp_card1 .col_2{margin-top: 0;}
  .cp_card1 .col_2 .playBtn{display: block; width: 60%;}
  .cp_card1 .playBtn a.btn-go{width: 100%;margin-bottom: 20px;}
  .cp_card1 .playBtn a.btn-line{width: 100%; }
  .cp_card1 .col_2{width: 90%;display:flex; flex-direction:column; justify-content:center; align-items:center;margin-bottom: 30px;} 
}
/*568px*/
@media only screen and (max-width:568px){
   .cp_card1 .col_2 {width: 95%;}
   .cp_card1 .col_2 .playBtn{width: 75%;}
}
/*375px*/
@media only screen and (max-width:375px){
  .cp_card1 .col_2 .playBtn{width: 90%;}
}


/*=============== part 新朋友小確幸 ===============*/

.part.section_1 .part {
   width: 100%;
   max-width: 800px;
   height: 424px;
   margin: 0 auto;
   position: relative;
   background: url(../images/pic_8.png) no-repeat left center / 100% auto;
}
.part.section_1 .part .info{
   width: 100%;
   max-width: 1099px;
   position: absolute;
   bottom: 60px;
}

.part.section_1 .part .summary{
   text-align: center;
}
.part.section_1 .part .summary p{
   font-weight: 500;
   font-size: clamp(14px, 4vw, 24px);
   margin-bottom: 0rem;
}
.part.section_1 .part .playBtn{
   width: 100%;
   display:flex; flex-direction:row; justify-content:center; align-items:center;
}
.part.section_1 .part .playBtn a.btn-go{
   display: block;
   width:30%;
   height: 0%;
   padding-bottom: 11%;
   background: url(../images/btn2.png) no-repeat left center / 100% auto;
   text-indent: 110%;
   margin-right: 20px;
   white-space: nowrap;
   overflow: hidden;
   transition: transform .3s ease, filter .3s ease;
}
.part.section_1 .part .playBtn a.btn-line{
   display: block;
   width:30%;
   height: 0%;
   padding-bottom: 10%;
   background-size: 100% auto;
   background: url(../images/btn3.png) no-repeat left center / 100% auto;
   text-indent: 110%;
   white-space: nowrap;
   overflow: hidden;
   transition: transform .3s ease, filter .3s ease;
}

.part.section_1 .part .playBtn a.btn-go:hover,
.part.section_1 .part .playBtn a.btn-line:hover {
   transform: scale(1.05);   
   filter: brightness(1.1); 
}
/*1200px part 新朋友小確幸*/
@media only screen and (max-width:1200px){
  .part.section_1{  
      padding: 10px;
   }
}

/*768px part 八月新朋友小確幸*/
@media only screen and (max-width:768px){
  .part.section_1 .part{  
      background: url(../images/pic_mb.png) no-repeat left center / 100% auto;
      max-width: 500px;
      height: 500px;  
      margin-bottom: 20px;
   }
   .part.section_1 .part .info {
      bottom: 50px;
   }
   .part.section_1 .part .summary {
      margin-bottom: 20px;
      line-height: 35px;
   }
   /*playBtn*/
   .part.section_1 .part .playBtn{
      flex-direction: column;
   }
   /*新註冊會員*/
   .part.section_1 .part .playBtn a.btn-go{
      width: 60%;
      margin-bottom: 10px;
      margin-right: 0px;
   }
   /*綁定+5點*/
    .part.section_1 .part .playBtn a.btn-line{
      width: 60%;
   }
}

/*480px part 新朋友小確幸*/
@media only screen and (max-width:480px){
   .part.section_1 .part{  
      height: 460px;
      margin-bottom: 20px;  
   }
  .part.section_1 .part .info {
      bottom: 80px;
      
   }
   .part.section_1 .part .summary {
      margin-bottom: 20px;
      line-height: 1.8rem;
   }
   /*line粗體*/
   .part.section_1 .part .summary .line.b{
     font-size: 20px;
   }
   /*新註冊會員*/
   .part.section_1 .part .playBtn a.btn-go{
      width: 65%;
   }
   /*綁定+5點*/
    .part.section_1 .part .playBtn a.btn-line{
      width: 65%;
   }
}
/*375px part 新朋友小確幸*/
@media only screen and (max-width:375px){
   .part.section_1 .part{  
      height: 360px;
      margin-bottom: 20px;  
   }
  .part.section_1 .part .info {
      bottom: 30px;
      
   }
   .part.section_1 .part .summary {
      margin-bottom: 20px;
      line-height: 1.5rem;
   }
}
/*360px part 新朋友小確幸*/
@media only screen and (max-width:360px){
   .part.section_1 .part{  
      height: 335px;
   }
  .part.section_1 .part .info {
      bottom: 30px;
   }
   .part.section_1 .part .summary {
      margin-bottom: 10px;
      line-height: 1.5rem;
   }
}


/* 預設（桌機）不換行 */
.mb-break {
  display: none;
}

/* 手機版才換行 */
@media (max-width: 768px) {
  .mb-break {
    display: inline;
  }
}


/*=============== section_2 職場鬼 ===============*/

.part.section_2{
   width: 100%;
   position: relative;
   background: #819fdc url(../images/bg3.png) no-repeat;
   background-size: 100% auto;
   padding-top: 50px;
   padding-bottom: 80px;
}

.part.section_2 .part{
   max-width:1000px;
   margin: 0 auto;
   position: relative;
}
.part.section_2 .title{
   max-width: 600px;
   margin: 0 auto;
   margin-bottom: 30px;
}
.part.section_2 .title_mb{display: none;}/*初始預設*/
.part.section_2 .title img{
   display: block;
   width: 100%;
   height: auto;
}
.part.section_2 .summary{
   text-align: center;
   font-size: clamp(16px, 4vw, 18px);
   font-weight: 400;
   line-height: 30px;
   color: #ffffff;
   margin-bottom: 5px;
}
.part.section_2 .title2{
   text-align: center;
   font-size: clamp(18px, 4vw, 22px);
   font-weight: 600;
   line-height: 30px;
   color: #ffffff;
   margin-bottom: 30px;
}
.part.section_2 .title2 img{
   width: 80px;
   padding: 5px;
   vertical-align: middle;
}
/*ghost*/
.part.section_2 .deco1_ghost{
   width: 13%;
   height: 0;
   position: absolute;
   padding-bottom: 16%;
   top: 3%;
   right:28px;
   background: url(../images/ghost3.png) no-repeat left center / 100% auto;
}

.part.section_2 .deco2_ghost{
   width: 20%;
   height: 0;
   position: absolute;
   padding-bottom:28%;
   top: 15%;
   left:-20%;
   background: url(../images/ghost4.png) no-repeat left center / 100% auto;
}

/*1200px part section_2*/
@media only screen and (max-width:1200px){
   .part.section_2 .deco2_ghost{
      display: none;
   }
   .part.section_2 .deco2_ghost_mb{
      width: 10%;
      height: 0;
      position: absolute;
      padding-bottom: 20%;
      top: 20%;
      left:60px;
      background: url(../images/ghost5.png) no-repeat left center / 100% auto;
   }
}


/*862px part section_2*/
@media only screen and (max-width:862px){
   .part.section_2 .title{
     display: none;
   }
   .part.section_2 .title_mb{
      display: block;
      max-width: 300px;
      margin: 0 auto;
      margin-bottom: 30px;
   }

   .part.section_2 .title_mb img{
      display: block;
      width: 100%;
      height: auto;
   }

   .part.section_2 .deco2_ghost{
      left: 10%;
      top:-190%;
      width: 14%;
      background: url(../images/ghost5.png) no-repeat left center / 100% auto;
   }
}

/*768px part section_2*/
@media only screen and (max-width:768px){
   .part.section_2 .deco1_ghost{
      width: 15%;
      height: 0;
      position: absolute;
      padding-bottom: 18%;
      top: 30%;
      right:6%;
   }

   .part.section_2 .deco2_ghost_mb{
      left: 5%;
      top:30%;
      width: 14%;
   }
}

/*414px part section_2*/
@media only screen and (max-width:414px){
   .part.section_2 .deco1_ghost{
      top: 30%;
      right:2%;
      width: 18%;
      padding-bottom: 24%;
   }

   .part.section_2 .deco2_ghost_mb{
      left:2%;
      top:30%;
      width: 16%;
      padding-bottom: 26%;
   }
}

/*375px part section_2*/
@media only screen and (max-width:375px){
   .part.section_2 .deco1_ghost{right:-20px;}
   .part.section_2 .deco2_ghost_mb{left:-10px;}
}




/*=============== section_2 投保獎項區 ===============*/
.part.section_2 .part_list_1{
   max-width: 1200px;
   margin: 0 auto;
   display:flex; 
   flex-wrap:wrap; 
   justify-content:space-around; 
   align-content:flex-start;
   margin-bottom: 30px;
}
.part.section_2 .area{
   margin: 0 auto;
}
.part.section_2 .area p.pic img { 
   width:100%; 
   max-width: 350px;
}

.part.section_2 .part_list_2{
   max-width: 800px;
   margin: 0 auto;
   position: relative;
   display:flex; 
   flex-wrap:wrap; 
   justify-content:space-around; 
   align-content:flex-start;
   margin-bottom: 30px;
}
/*=============== area  ===============*/
.part.section_2 .area{
   position: relative;
}
.part.section_2 .area a.btn{
   display: block;
   width: 180px;
   height: 0;
   position: absolute;
   bottom: 10%;
   left: 25%;
   padding-bottom: 20%;
   background: url("../images/area1_btn.png") no-repeat left center / 100% auto;
   text-indent: 110%;
   white-space: nowrap;
   overflow: hidden;
}

.part.section_2 .area a.btn:hover {
   transform: scale(1.05);   
   filter: brightness(1.1); 
}

/*=============== area 客製化 ===============*/
.part.section_2 .area2 a.btn{
   background: url("../images/area2_btn.png") no-repeat left center / 100% auto;
}  
.part.section_2 .area3 a.btn{
   background: url("../images/area3_btn.png") no-repeat left center / 100% auto;
}  
.part.section_2 .area4 a.btn{
   background: url("../images/area4_btn.png") no-repeat left center / 100% auto;
} 
.part.section_2 .area5 a.btn{
   background: url("../images/area5_btn.png") no-repeat left center / 100% auto;
}   

/*375px*/
@media only screen and (max-width:375px){
   .part.section_2 .area a.btn{left: 19%;}
}


/*=============== section_notice ===============*/
.part.section_2  .section_notice{
   max-width: 1000px;
   margin: 0 auto;
}
/*h3 notice_title*/
.notice_title{
    width: 100%;
    max-width: 1000px;
    margin:0 auto;
    margin-bottom: 20px;
    position:relative;
    text-align:center;
    font-size: clamp(20px, 4vw, 26px);
    font-weight:bold;
    color:#5a63c7;
    padding:10px 60px;
    border-radius:999px;
    background:#ffe79f;
    box-shadow: inset 0 -5px 0px #ffdd76;
    cursor:pointer;
}
.notice_title img.arrow{
   width: auto;
   height: 30px;
   margin-left: 10px;
   margin-top: -5px;
   vertical-align:middle;
   transform: rotate(0deg);
   transition: transform .3s ease;
}

/* 展開時旋轉 */
.notice_title.active img.arrow{
    transform: rotate(-180deg);
}

.section_notice{
    background:#f5f5f5;
    padding:15px 30px;
    border-radius:10px;
    line-height:1.8;
    color:#333;
}

/* 主標題 */
.section_notice h3{
    font-size:22px;
    font-weight:bold;
    margin-bottom:20px;
}

/* 小標 */
.section_notice h4{
    font-size:16px;
    margin:15px 0;

}

/* 主清單 */
.section_notice .part > ul{
    list-style:none;
    padding-left:0;
   font-weight: 500;
}

/* 每個區塊（1.2.3.4） */
.section_notice .part > ul > li{
   position:relative;
   padding-left:30px;
   font-weight: 500;
}

/* 藍色數字圓圈 */
.section_notice .part > ul > li::before{
   content:counter(item);
   counter-increment:item;
   position:absolute;
   left:5px;
   top:2px;/**/
   width:20px;
   height:20px;
   line-height:20px;
   background:#dbe9ff;
   color:#3a5edb;
   text-align:center;
   border-radius:50%;
   font-size:12px;
   font-weight:bold;
}

/* 啟用計數器 */
.section_notice .part > ul{
    counter-reset:item;
}

/*點點配色*/
.section_notice ol li::marker{
    color:#4d52a6;
}


/* 子項目（小點點） */
.section_notice ol{
    padding-left:50px;
}
/*子項目（小點點）取消*/
.section_notice ol.no-dot{
    padding-left:30px;
}
.section_notice ol.no-dot li{
    list-style: none;
    padding-left:0px;
}

.section_notice ol li{
    list-style:disc;
    margin-bottom:6px;
    font-weight:normal;
    font-weight: 500;
}

/* 段落間距 */
.section_notice li{
    line-height:1.8;
}

/*注意事項*/
.section_notice .part_list_4 > ul > li{
   margin-bottom: 6px;
}
/*取消數字*/
.section_notice .part_list_4 > ul > li.no-dot::before{
    content:none;
}

/*1200px*/
@media only screen and (max-width:1200px){
   .part.section_2 {padding: 20px;}
   .part.section_2 .section_notice{padding: 15px 20px;}
}
/*768px*/
@media only screen and (max-width:768px){
   .part.section_2 .notice_title{width: 85%;}
}
/*375px*/
@media only screen and (max-width:375px){
   .part.section_2 .notice_title{width: 100%;padding: 10px 10px;}
}

.section_notice .part > ul > li a:hover{color: #3a5edb;}
.section_notice .part > ul > li a:active{color: #3a5edb;}
.section_notice .part > ul > ol> li a:hover{color: #3a5edb;}
.section_notice .part > ul > ol> li a:active{color: #3a5edb;}
/*=============== footer ===============*/
.footer{
   width: 100%;
   max-width: 1200px; 
   color: #207cd9;
   font-size: 1rem;
   font-weight: 500;
   margin: 0 auto; 
   display:flex; flex-direction:row; 
   justify-content: space-between; align-items:center; 
   padding: 20px;
}
.footer ul.row1{
   width: 75%;
   display:flex; 
   flex-direction:column; 
   justify-content:center; align-items: flex-start;
}
.footer ul.row1 li{
    display:flex;
    align-items:center;
    flex-wrap:wrap; 
}

.footer ul.row2{
   display:flex; flex-direction:row; justify-content:center; align-items:center;
}
.footer ul.row2 li{
   margin-right: 15px;
}
.footer ul.row2 li::before{
   content:"|";
   margin-right:15px;
   color:#207cd9;
}
.footer ul.row2 li:first-child:before{
   content:none;
}
.footer a{
   color: #207cd9
}
.footer a:hover{
   color: #3c95dd;
}
.footer address{
   width: 100%;
   margin-bottom: 0rem;/*bs歸零*/
}
/*1200px*/
@media only screen and (max-width:1200px){
  .footer{flex-direction: column;}
  .footer ul.row1{width: 100%;align-items: center;}
  .footer ul.row2{width: 100%;}
  .footer ul.row1 h4{ width: 100%;font-size: 1rem;}
  .footer ul.row1 li{justify-content: center;margin-bottom: 10px; }
  .footer ul.row1 address{ text-align: center; display:flex; flex-direction:row; justify-content:center; align-items:center;margin-bottom: 10px; }
  
}
/*768px*/
@media only screen and (max-width:768px){
  .footer{font-size: 14px;}
}

/*=============== btn_nav ================ */
a.btnGO{width: 100px; height: 100px; position: fixed; right:5px; bottom: 90px; text-indent: -9999px;z-index:500;
background:url("../images/btn_go2.png") no-repeat left center/100% auto; cursor: pointer; 
opacity: 0;
transform: translateY(80px);
transition: opacity .3s ease, transform .3s ease;

}
a.btnGO:hover{ filter: brightness(1.1);  }
a.btnGO.active{opacity: 1;transform: translateY(0);}

button.btnGO,
button.btnGO:focus,
button.btnGO:active{
    outline: none;
}

/*=============== goToTop ================ */
button.goToTop{ width:44px; height:44px; background:rgba(0,0,0,.7); position:fixed; right:30px; bottom:-80px; z-index:500; cursor:pointer;
opacity:0;transform:translateY(80px);transition: all .3s ease;border:0px solid red; }
button.goToTop::before{ content:""; display:block; width:20px; height:20px; border-top:2px solid #fff; border-left:2px solid #fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-20%) rotate(45deg); }
button.goToTop.active{ bottom:40px; opacity:1;transform:translateY(0);}


/*箭頭*/
button.goToTop{border-radius:50%;}
button.goToTop::before{width:15px;height:15px;border-top:4px solid #fff; border-left:4px solid #fff;}

/*hover*/
button.goToTop:hover{ background:rgba(0,0,0,.9); }
button.goToTop:hover::before{width:15px;height:15px;border-top:2px solid #fff; border-left:2px solid #fff;}

/*768px*/
@media only screen and (max-width:414px){
   a.btnGO{width: 80px; height: 80px;}
   button.goToTop{right:20px;}
}


/*=============== popup ===============*/
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 9;
}

/* 開啟 */
.popup.active {
  opacity: 1;
  visibility: visible;
}


/* 中間盒子 */
.popup_box {
  width: 85%;
  max-width: 420px;
  border-radius: 16px;
  padding: 25px;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 2px solid #7ed6ff; 
  transform: scale(0.8);
  transition: .3s;
  z-index: 10;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}


/* 標題 */
.popup h3{
  font-size: clamp(22px, 4vw, 24px);
  font-weight: 500;
  color: #348ed3;
  letter-spacing: 2px;
}

.popup_content{
   margin-bottom: 10px;
   font-size: clamp(14px, 4vw, 20px);    
}

/* 開啟動畫 */
.popup.active .popup_box {
  transform: scale(1);
}

/* 關閉按鈕 */
.popup_close {
  position: absolute;
  top: 2px;
  right: 10px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: #58adee;
}

.btn-confirm{ 
  display: inline-block;
  padding: 5px 40px;
  font-size: 18px;
  font-weight:400;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  background: linear-gradient(
    to bottom,
    #58adee,
    #4d4d8c
  );
  transition: all .2s ease;
}

body.no-scroll {
  overflow: hidden;
}