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

/* CSS Document @media由小寫到大*/
:root {
   --bs-danger-rgb: 193, 24, 40;
   --bs-primary-rgb: 7, 66, 138;
   --bs-warning-rgb: 251, 207, 111;
}
* { padding: 0; margin: 0; }
body { scroll-behavior: smooth; font-family: arial, 'Noto Sans TC'; font-weight: 400; -webkit-overflow-scrolling: touch; }

.wrap h2{letter-spacing: 2px;font-size: min(8vw,3em);}
.bg_blue h3{letter-spacing: 2px;}

.bg_white{ background:url(../images/bg.png) no-repeat right bottom,
   linear-gradient(#f3f3f3 1px, transparent 1px) -1px -1px, 
   linear-gradient(90deg, #f3f3f3 1px, transparent 1px) -1px -1px;
   background-size:20% auto,20px 20px, 20px 20px;}

.bg_pink {background:url(../images/bg.png) no-repeat right bottom,
   linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) -1px -1px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) -1px -1px rgb(var(--bs-danger-rgb));
    background-size:20% auto,20px 20px, 20px 20px;}

.bg_blue{background:url(../images/bg.png) no-repeat right bottom,
   linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) -1px -1px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) -1px -1px rgb(var(--bs-primary-rgb));
    background-size:20% auto,20px 20px, 20px 20px;}
    
.bg_brown { background:url(../images/bg.png) no-repeat right bottom,
   linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px) -1px -1px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px) -1px -1px #e9e9e9;
    background-size:20% auto,20px 20px, 20px 20px; }

    .handicon{position: relative;display:block;
      &:after{position: absolute; right:5%;bottom: 0;display: inline-block; color: #fff;text-shadow: 0 0 5px #000; content: '\f25a';transition-duration: .3s;transform: rotate(-15deg); font-family: "Font Awesome 6 Free"; font-size: 5vh; font-weight: 400;}
      &:before{position: absolute; display: block;width: 100%; height: 100%;background: linear-gradient(160deg,  rgba(0,0,0,0) 75%,rgba(0,0,0,0.65) 100%);content: '';}
      &:hover:after{font-size: 6vh;}   
   }

.bg_warning:after{position: absolute;z-index: -1; top:0;left:0;display: block;width: 95%; height: 100%;margin-left: 2.5%;border-radius: 5px; background: rgb(var(--bs-warning-rgb)); content: '';transform:skewX(-4deg);}

.study_mode .col:not(:last-child){border-bottom: 1px dashed rgb(var(--bs-primary-rgb));}
.study2_mode{ letter-spacing: 1px;font-size:min( 5vw,1.6em);}

/*sm*/
@media (min-width:576px) {   
   .study_mode .col:not(:last-child){border-right: 1px dashed rgb(var(--bs-primary-rgb));border-bottom: 1px dashed rgb(var(--bs-primary-rgb));}
   .study_mode .col:nth-of-type(2){border-right: 0px dashed rgb(var(--bs-primary-rgb));border-bottom: 1px dashed rgb(var(--bs-primary-rgb));}
   .study_mode .col:nth-of-type(3){border-bottom: 0px dashed rgb(var(--bs-primary-rgb));}
}

/*md*/
@media (min-width:768px) {}

/*lg*/
@media (min-width:992px) {
    .study_mode .col:nth-of-type(2){border-right: 1px dashed rgb(var(--bs-primary-rgb));}
     .study_mode .col{border-bottom: 0px dashed rgb(var(--bs-primary-rgb)) !important;}
}

/*xl*/
@media (min-width:1200px) {}

/*xxl*/
@media (min-width:1400px) {}