@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400..900&display=swap');

/* CSS Document @media由小寫到大*/
:root{
   --bs-primary-rgb:65,48,77;
   --bs-primary:#411f58;
   --bs-warning-rgb:252,238,33;
   --bs-warning:#fcee21;
   --bs-danger-rgb:252,120,50;
   --bs-info-rgb:224, 30, 2;
   --bs-info:#e01e02;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #362244;
  --bs-btn-hover-border-color: #362244;
  --bs-btn-focus-shadow-rgb: 54, 34, 68;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: ar(--bs-primary);
  --bs-btn-active-border-color: ar(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
* { padding: 0; margin: 0; }
body {scroll-behavior: smooth;background: linear-gradient(to right,  #da0e01 0%,#eb3b03 100%); font-family: arial, 'Noto Sans TC'; font-weight: 400; -webkit-overflow-scrolling: touch; }
.wrap::before{position: fixed;z-index: -2;top: 0; left: 0;width: 100%;height: 100vh;background: linear-gradient(to bottom,  rgba(255, 230, 105,0) 20%,#ffe669 95%);content: '';
}
.wrap::after{position: fixed;z-index: -1;top: 0; left: 0;width: 100%;height: 100vh;background-image:
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-position:-1px -1px, -1px -1px;
background-size: 40px 40px, 40px 40px;content: '';
}

header{background: linear-gradient(to right,  #da0e01 0%,#eb3b03 100%);}

.stroke {position: relative; z-index: 10; display: inline-block; color: #fff;}
.stroke:before {position: absolute; z-index: -1; content: attr(data-stroke); -webkit-text-stroke: 6px var(--bs-primary); }
.btn-lg:hover{box-shadow: 0 0 10px var(--bs-warning);}

.sec1{background: url(../images/bg_time.png) no-repeat bottom right;background-size: contain;}
.sec2,.sec3,.sec4{background: url(../images/bg_time.png) no-repeat bottom right,url(../images/bg_arrow.png )no-repeat top right;background-size: contain,180% auto;}

/*sec1*/
.student_title{width:calc( 100% + 2em ) ;height: 138px;margin: -90px -1em 10px; 
   & h3{transform: rotate(-5deg); font-size:min(6vw,1.4em);}
}
.student_img{margin-right: 1em;margin-bottom: -40px;}
.stroke2 {position: relative; z-index: 10; display: inline-block; color: var(--bs-primary);}
.stroke2:before {position: absolute; z-index: -1; content: attr(data-stroke); -webkit-text-stroke: 5px #fff ; }
.swiper-student .swiper-slide{padding-top: 75px;}

/*sec2*/
.sec2{padding-bottom:min( 60vw,370px) ;}
.sec2:before{position: absolute; z-index: 0;bottom:0; display: block;width: 100%;height: 100%;background: url(../images/sec2_bg.png) no-repeat bottom left;background-size: 120% auto;content: '';}
.sell .bg-white{background-image: url(../images/sec2_sell.png);background-repeat: no-repeat;background-position:right bottom;}
.sell .bg-info{top:-15px;transform: rotate(-4deg) !important;
& span{width: 1.4em;height: 1.4em;line-height: 1.4em;}
}
.bg_red_gradient{background: linear-gradient(to right,  #da0e01 0%,#eb3b03 100%);}

/*sec3*/
.bg_yellow_gradient{background: linear-gradient(to bottom,  #ffe669 0%,#fff 100%);
   & h3{top: -50px;margin-bottom: -45px;}
}
.tip{
   &:before,&:after{position: absolute;top:min(-5%,-40px);left:50% ;display: inline-block;width:6em ;margin-left:min(20%,3.8em) ; content: '\\ 最全面！/'; transform: rotate(8deg);font-size: 1em;font-weight: normal;}
   &:before{z-index: 0; color: #fff; -webkit-text-stroke: 5px var(--bs-primary);}
   &:after{z-index: 1;color: #fff;}   
}
.video h2{
   &:before,&:after{position: absolute;bottom:0px;display: inline-block;}
   &:before{left:30px;content: '\\';}
   &:after{right: 30px;content: '/';}
}

/*sm*/
@media (min-width:576px) {   
   .student_title{
   & h3{font-size:min(6vw,1.3em);}
   }
   .video h2{ 
      &:before,&:after{position:static;}  
   } 
 }

/*md*/
@media (min-width:768px) {
   .stroke:before { -webkit-text-stroke: 8px var(--bs-primary); }
   .sec2{padding-bottom:min( 60vw,300px) ;}  
   .sec2:before{background-size: 90% auto;}
}

 /*lg*/
@media (min-width:992px) {
   .sec2,.sec3,.sec4{background-size: contain,100% auto;}
   .sec2{padding-bottom:min( 60vw,250px) ;} 
   .sec2:before{background-size: 70% auto;} 
   .video .btn{font-size:1.4em !important;}
   .btn-lg{font-size: 1.6em !important;}
 }

/*xl*/
@media (min-width:1200px) { 
   .sec2{padding-bottom:min( 20vw,180px) ;}
   .sec2:before{background-size: 50% auto;} 
}

/*xxl*/
@media (min-width:1400px) { 
   .btn-lg{font-size: 2em !important;}
   .student_title{
   & h3{font-size:min(6vw,1.2em);}
   }
   .sec2:before{background-size: 40% auto;} 
}
@media (min-width:1600px) {
   .student_title{
   & h3{ font-size:min(6vw,1.4em);}
   }
 }
 @media (min-width:1700px) {
   .sec2{padding-bottom:min( 20vw,100px) ;}
 }