@charset "UTF-8";
body{overflow-x: hidden;}
*{scroll-behavior: smooth;}
img{width: 100%;display: block;margin:inherit auto;}
table{width: 100%;}
th,td{vertical-align: middle;}
a,a *{transition: all .15s ease-in-out; color: inherit;}
#page {overflow: hidden;position: relative;}
#page section,header{padding: 3em 0.5em 1.5em;margin: 0;position: relative;}
#page article{max-width: 1000px;margin:0 auto; padding: 1.5em 1em 1em;position: relative;z-index: 1;}
footer{padding-bottom: 15vh!important;}
#buttones{padding-bottom: 15vh;}
.rounded-2xs{border-radius: 0.5em!important;}
.rounded-xs{border-radius: 0.8em!important;}
.rounded-1x{border-radius: 1em!important;}
.rounded-2x{border-radius: 1.5em!important;}
.roundedx{border-radius: 3em!important;}
.rounded-4x{border-radius: 4em!important;}
.rounded-top{border-bottom-left-radius: 0!important;border-bottom-right-radius: 0!important;}
.rounded-bottom{border-top-left-radius: 0!important;border-top-right-radius: 0!important;}
.rounded-left{border-top-right-radius: 0!important;border-bottom-right-radius: 0!important;}
.rounded-right{border-top-left-radius: 0!important;border-bottom-left-radius: 0!important;}
.list-star{text-align: left;list-style: "★"}
/*logo*/
.logo{display: inline-block;padding:0.125em 0.3em;background:url(../img/LOGO.svg)center/contain no-repeat;color: rgba(255,255,255,0.01)!important;text-shadow: none}
.bg-dark .logo{
background: url('data:image/svg+xml;utf8,')center no-repeat;
}
/*圓形*/
.circle{display: inline-flex;justify-content: center;align-items: center;border-radius: 100%;aspect-ratio:1/1;min-width: 1em;min-height: 1em;padding: 0.125em;}
/*-----------------------------------------按鈕-----------------------------------------*/
/*留單按鈕 OR 前往各班按鈕*/
[class*="btn"]{
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
outline: 0;
line-height: 1.25;
vertical-align: middle;
text-decoration: none;
text-align: center;
cursor: pointer;
text-align: center;
transition: all .15s ease-in-out;
display: inline-block;
position: relative;
z-index: 2;
color: inherit;
}
:is(.btn,.more_btn):hover {filter: drop-shadow(0 0 0.01rem white)drop-shadow(0 0 0.25rem var(--amber))drop-shadow(0 0 0.25rem var(--yellow)); }
/*洽詢按鈕*/
.more_btn{min-width: 10em;padding: 0.25em 1em;filter: drop-shadow(0.25em 0.25em .125em #00000055);}
.more_btn,.more_btn:before,.more_btn:after{
color: white;
background: var(--orange);
border: 0.2rem solid var(--indigo);
margin-bottom: 1.5rem;
box-sizing: border-box;
position: relative;
z-index: 2;
}
.sale_btn,.sale_btn:before,.sale_btn:after {
background: #09f;
}
.sale {
display: flex;
display: -webkit-flex;
margin: 1vh 1vw;
justify-content:space-evenly;
align-items: center;
}
.more_btn:before,.more_btn:after{
z-index: 1;
position: absolute;
content: "";
width: 0.75rem;
height: calc(100% + 0.3rem);
top: -0rem;
left: 100%;
transform-origin: top left;
transform: skew(0,45deg)translate(0,-0.2rem);
border-radius: 0.2em;
}
.more_btn:before{
width: calc(100% + 0.3rem);
height: 0.75rem;
top: 100%;
left: -0rem;
transform-origin: top left;
transform: skew(45deg,0)translate(-0.2rem);
}
.more_btn:hover:after{transform: skew(0,45deg)translate(0,-0.2rem);width: 0.5rem;}
.more_btn:hover:before{transform: skew(45deg,0)translate(-0.2rem);height: 0.5rem;}
/*#btns 目錄按鈕*/
:where(#btns) .btn{
/* background: url('data:image/svg+xml;utf8,')center/contain no-repeat; */
background: url(../images/btn.svg)center/ contain no-repeat;
padding: 1.5em;
width: 100%;
min-width: 5em;
line-height: 1;
font-weight: 600;
color: yellow;
filter: drop-shadow(0.25em 0.25em #003f7699);
font-size: 0.85em;
}
@media screen and (max-width: 55em) {
.sale {
flex-wrap: wrap;
}
}
@media screen and (min-width: 576px)
#btns .btn {
font-size: 2em;
}
:is(main .btn,.more_btn):hover {transform: translate(-0rem,1rem); }
:where(.more_btn,.btn) i.fa-arrow-pointer{position: absolute;z-index: 2;top: 80%;right: 0.125em;font-size: 2em;color: white;}
:where(.more_btn,.btn):hover i{transform: translateX(-0.5em)scale(0.0001);}
.disabled,
.disabled:hover {
cursor: not-allowed !important;
}
/*-------------------------------------END-按鈕-----------------------------------------*/
/*-----------------------------------------顏色-----------------------------------------*/
/* Colors */
:root{
--indigo:#003f76;
--pale-yellow:#fffbc7;
--swiper-theme-color:var(--amber);
}
.gradient{background: linear-gradient(var(--gradient-goldenrod-deg),var(--gradient-goldenrod));}
.border-gradient{
border-image: url('data:image/svg+xml;utf8,')20 fill/1.5em/0.5em;
}
.hover-shadow:hover, .shadow {filter: drop-shadow(0.01rem 0.01rem 0.5em #00000022); }
.box-shadow{box-shadow: 0.25em 0.15em darkgray; }
[class*="stroke"].text-shadow{filter: drop-shadow(0.25rem 0.25rem 0.5rem #000000aa);}
/*logo、CIS文字*/
.logo{padding: 0.25em;background:url(../images/學儒保成-LOGO外.svg)center/contain no-repeat;color: rgba(255,255,255,0.01)!important;text-shadow: none}
.CIS{background:url(../images/學儒保成-CIS.svg)center/contain no-repeat;color: rgba(255,255,255,0.01)!important;text-shadow: none}
.text-shadow>.logo,.text-shadow>.CIS{text-shadow: none;filter: drop-shadow(0.15em 0.15em 0.1em #00000099);}
/*-------------------------------------END-顏色-----------------------------------------*/
main section:nth-child(even){
background:url(../images/BG-yellow.png)center/100% repeat-y,
#ffdd00;
}
main section:nth-child(odd){
background:
url(../images/BG-gray.png) center bottom -3em /80% repeat-y,
url(../images/BG-3.png)bottom/35% repeat-x;
}
/*----------------------------------------- 背景-----------------------------------------*/
main section:nth-child(even) .title{
background: url(../images/title2.svg) center/contain no-repeat;
color: white;
}
main section:nth-child(odd) .title{
background: url(../images/title.svg) center/contain no-repeat;
color: white;
}
/*----------------------------------------end- 背景-----------------------------------------*/
/*----------------------------------------- header-----------------------------------------*/
header h1{
color:rgba(255,255,255,0.01);
}
header{
background: url(../images/BG-yellow.png)center/100% repeat-y,
url(../images/BG-3.png) left bottom -1em /30% no-repeat,
url(../images/BG-4.png) right top -2em / 40% no-repeat,
#ffdd00;
}
header article{
background: url(../images/ban-fireman.png) center right 10%/12% no-repeat,
url(../images/ban-police.png) center left 8%/12% no-repeat ;
}
/*----------------------------------------end- header-----------------------------------------*/
/*----------------------------------------- a01-----------------------------------------*/
/*----------------------------------------end- a01-----------------------------------------*/
/*----------------------------------------- a02-----------------------------------------*/
#a02 .item{
border: 0.25em solid white;
border-radius:0.8em;
margin: 0.25em auto 0.5em;
background-color: darkblue;
padding: 0.5em 0.15em 0.5em;
}
#a02 .item_3{
background: url(../images/獎盃.png) right 8% bottom/clamp(10%,5%,4em) no-repeat,
url(../images/獎盃.png) left 8% bottom/clamp(10%,5%,4em) no-repeat;
}
/*----------------------------------------end- a02-----------------------------------------*/
/*----------------------------------------- a03-----------------------------------------*/
/*----------------------------------------end- a03-----------------------------------------*/
/*----------------------------------------- a04----------------------------------------*/
#a04 .box_1{
background: url(../images/lamp.png) bottom left 5%/10% no-repeat,
url(../images/lamp.png) bottom right 5%/10% no-repeat,
rgba(255,255,255,0.95);
}
.box{
background: url(../images/Shield.svg) center/100% 100% no-repeat;
filter:drop-shadow(0.25em 0.25em #003f7699);
}
#a04 .box{
max-width: 8em;
margin: auto;
padding: 1.75em 1em 2em;
margin-bottom: 0.5em;
}
#a04_2 .col-12{
width: 1000px;
}
/* #a04_2 .col-12{
background: url(../images/警察二試.png);
background-position: top 2em right 5em;
background-repeat: no-repeat;
} */
#a04_2 .item_2{
background: white;
border: 0.25em solid darkblue;
padding: 0.8em;
}
#a04_2 .item_2 h6{
border-bottom: 0.1em dashed darkblue;
padding-bottom: 0.3em;
}
#a04_2 .box_2{
background: url(../images/car.png) right 5em top /18% no-repeat,
url(../images/car.png) left 5em top/18% no-repeat ;
padding: 2em;
}
#a04_2 .item_2 .photo{
position: absolute;
right: 2em;
bottom:2em;
max-width: 10em;
width: 8em;
min-width: 0.25em;
}
/*----------------------------------------end- a04-----------------------------------------*/
/*----------------------------------------- a05-----------------------------------------*/
@media screen and (min-width:576px){
#a05_2 .circle{font-size:1.75em;}
}
#a05_2 .circle{
flex-wrap: wrap;
align-content: center;
margin: 0.25em;
margin-top: 3em;
width: 8em;
height: 8em;
}
/*----------------------------------------end- a05-----------------------------------------*/
/*----------------------------------------- buttones----------------------------------------*/
/*----------------------------------------end- buttones-----------------------------------------*/