@charset "utf-8";
:root {
	--min4-padding:10px;
  --theme-color: #0463BC;
  --text-color: #333;
  --hover-color:#cc2929;
  --box-color:#da3535;
  --border-bot:1px solid #eee;
  --max-width:1200px;
  --box-width:100%;
}
*{padding:0; list-style:none; margin:0; text-decoration:none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; border:none;word-wrap:break-word;}
/*font-family:"Noto Sans", "Apple Casual", Corbel, "Microsoft JhengHei Fixed", "Microsoft JhengHei", sans-serif;*/
html{font-size:17px; letter-spacing:1px; line-height:1.8}
@media (max-width: 760px){
html{font-size:15px}	}
body.corbg{background:#e6ecf2}
.bodybg{max-width:var(--max-width); width:100%; margin:0 auto; min-height:90vh; color:var(--text-color);box-shadow:-3px 3px 18px 2px rgba(0, 0, 0, .7); background:#fff;}
#head{width:100%; padding:5px 10px; display:flex; position:sticky; top:0; justify-content:center; align-items:center; background:var(--theme-color);box-shadow: 0px 18px 24px 0px rgba(0,0,0,.4); z-index:100}
#head a{color:#fff; font-size:24px; font-weight:700;text-shadow:3px 5px 0px #051f38}
img{ height:auto; max-width:100%}
.line-clamp{display: -webkit-box;  overflow: hidden;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.logo66{display:block; vertical-align:bottom; margin:auto}
.fiex{display:flex; gap:10px; width:100%;}
.fiexh1{justify-content:space-between; align-items:center; padding:20px; background:#fff; border-radius:15px; position:relative; margin:0 auto; width:96%; top:-45px;box-shadow: 0px 18px 24px 0px rgba(0,0,0,.06)}
.h1{font-size:3rem; padding:10px; flex:3; text-align:center}
.h11{font-size:1.5rem; padding:10px; flex:4; font-weight:900}
.fiexcount{padding:0 20px; border-left:1px solid var(--theme-color); font-size:0.8rem; text-align:center; flex:1}
.fiexcount strong{font-size:2.8rem; color:var(--theme-color); display:block}

.fiexpay{ border-left:1px solid var(--theme-color); font-size:0.8rem; text-align:center; flex:1; display:flex; justify-content:center; align-items:center}
.fiexpay div{flex:1}
.fiexpay strong{font-size:1.8rem; color:var(--theme-color); letter-spacing:0;}


.maindiv{box-shadow: 0px 18px 24px 0px rgba(0,0,0,.06); padding:20px; background:#fff;}
.maindivbtn{width:100%; display:flex; align-items:center; justify-content:center; padding:15px; border-bottom:var(--border-bot);position:sticky; top:45px;box-shadow:inset -3px 3px 18px 2px rgba(0, 0, 0, .4); z-index:99; background:#eceaea;}
.maindivbtn li{flex:1; font-size:0.8rem; text-align:center; font-weight:700}
.maindivbtn li span{padding:2px 4px; cursor:pointer; font-size:18px; font-weight:900}
.maindivbtn li span.thisbg,.maindivbtn li span:hover{color:var(--theme-color); border-bottom:3px solid var(--theme-color)}

.coursebox{padding:15px 10px}
.openmain{padding:8px 8px 0 10px} 
.texth2{margin:0 0 1rem 0; font-size:1rem; border-bottom:var(--border-bot); padding:0 0 1rem 0}
.texth2 h2{font-size:1.5rem; padding:3px 0 3px 3px; border-left:5px solid #0075C9; line-height:1}

ul.courseul{display:flex; width:100%; gap:15px; flex-wrap:wrap; padding:5px}

.courseul li{flex:0 0 calc(100% / 3 - 15px); border-radius:15px;box-shadow: 0px 2px 8px rgba(0, 0, 0, .1);transition: transform .3s, box-shadow .3s; position:relative; background:#fff; border:1px dotted #D0D0D0}
.courseul li:hover{box-shadow: 0px 10px 35px rgba(0, 0, 0, .06);transform: translateY(-4px);}
.courseul li time{padding:10px 10px 0 10px; display:flex; gap:5px; font-size:14px; align-items: center; flex-wrap:wrap; color:#666;}
.courseul li h3{font-size:18px; padding:5px 10px 0 10px; line-height:1.3; font-weight:900}
.courseul li .pic1 img{transition:transform .8s; border-radius:15px 15px 0 0;}
.courseul li .pic1{overflow:hidden; display:block}
.courseul li:hover .pic1 img{transform:scale(1.05);}
.courseul li address{padding:10px 10px; display:flex; gap:5px; font-size:14px; align-items: center; flex-wrap:wrap; font-style:normal; border-bottom:var(--border-bot)}
.courseul li svg{vertical-align:middle}
.courseul li .pay{display:flex; justify-content:space-between; align-items: center; padding:10px; font-size:14px}
.courseul li .pay_2{color:#980002}
.courseul li:hover{box-shadow: 0px 18px 24px 0px rgba(0,0,0,.4);}
.courseul li:hover h3{text-decoration:underline;color:var(--theme-color)}
.courseul li:hover a::before{position:absolute; inset:0; content:''}

.picbox{display:flex; gap:20px; justify-content:center}
.tagss{display:flex; gap:2px 8px; align-items:center; flex-wrap:wrap; font-weight:700; margin-top:20px}
#setid dt{font-weight:700}
#setid dd{font-size:14px; padding:5px 5px; border-bottom:1px dotted #555; cursor:pointer}
#oldsetid dd:hover,#setid dd:hover,#setid dd.okid{background:#F4F4F4}
.addtext time{display:flex; gap:0 5px; align-items:center; flex-wrap:wrap;}
.addtext #setid time::before{content:'\2714'; color:#fff; width:15px; height:15px; background:#d5d5d5; border-radius:3px;  font-weight:bold; text-align:center; font-size:10px}
.addtext #setid dd.okid time::before{content:'\2714'; background:var(--theme-color)}
.addtext time span{color:var(--theme-color); letter-spacing:0; font-weight:700}
.addtext #setid address{display:flex; font-style:normal; flex-direction:column; padding-left:18px}
.addtext address div{display:flex; gap:0 5px; flex-wrap:wrap; align-items:center; line-height:1}
.addtext a{letter-spacing:0; color:#039}
.addtext svg{vertical-align:middle}
#copyname{padding:10px; background:#F4F4F4;box-shadow:inset 0px 20px 20px 0px rgba(0, 0, 0, .2); border:1px solid #AAAAAA; border-radius:3px; margin-top:15px}
#copyname address{display:flex; font-style:normal; flex-direction: column}

.formDl{margin:10px 0}
.formDl h2{padding:10px !important; text-align:center; color:#fff; background:var(--theme-color); border:none !important}
.formDl ul{width:100%; padding:20px 5px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.formDl li{flex:0 0 calc(100% / 2 - 10px); display:flex; align-items:center}
.formDl li .int01{padding:8px;flex:0 0 calc(100% - 110px); border:1px solid #878787}
.formDl li .impot::before{color:#f00; content:'*'}
.formDl li span,.formDl li label{flex:0 0 110px; text-align:right; padding:0 5px 0 0}
.formDl li b{color:#f00; font-size:2rem}

.Web66Pay{margin:10px 0}
.Web66Pay h2{padding:10px; text-align:center; color:#fff; background:var(--theme-color)}
.Web66Pay ul{width:100%; padding:20px 5px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.Web66Pay li{flex:0 0 calc(100% / 2 - 10px); display:flex;; align-items:center; font-size:1rem}
.Web66Pay li b{flex:0 0 calc(100% - 60px); color:var(--theme-color)}
.Web66Pay li span.tname{flex:0 0 60px; text-align:right; font-size:14px}


#oldsetid{margin-bottom:25px}
#oldsetid dt{font-weight:700}
#oldsetid dd{font-size:14px; padding:5px 5px; border-bottom:1px dotted #555; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap}
#oldsetid dd font{color:#6E6E6E}


.submit{display:table; cursor:pointer; padding:5px 20px; margin:10px auto; border:1px outset #0024AD;color:#fff; background:var(--theme-color); font-size:2rem; text-align:center;box-shadow: 0px 18px 24px 0px rgba(0,0,0,.1); border-radius:8px}
.submit:hover{background:#9F0306; border:1px inset #940507}


.govisa{display:table; cursor:pointer; padding:5px; width:85%; margin:10px auto; border:1px outset #0024AD;color:#fff; background:var(--theme-color); font-size:2rem; text-align:center;box-shadow: 0px 18px 24px 0px rgba(0,0,0,.1); border-radius:8px}
.govisa:hover{background:#9F0306; border:1px inset #940507}

.padding_20{padding:4px 10px}
.flex{display:flex; gap:2px 6px; align-items:center; flex-wrap:wrap}
.list_nn{display:flex; gap:2px 8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; background:#ddebf1; margin-top:10px; padding:5px 10px}

.list_h2 a{font-size:1.2rem; color:#000}
.ins{padding:3px; border:1px solid #B4B4B4}
.inr{padding:3px; border:1px solid #B4B4B4}
.corbg{padding:1px 3px; border-radius:3px; font-size:13px;background-image: linear-gradient(180deg, #74a9ff, #3981f4); color:#fff;}

.list_post,.list_nn{border-bottom:1px solid #D4D4D4;}
.list_post:last-child{border:none}
.list_post:hover{background:#f9fbff; position:relative}
.list_post:hover .list_h2 a{color:var(--hover-color); text-decoration:underline;}
.list_post:hover .list_h2 a::after{position:absolute; content:''; inset:0}
.red2{color:#AA0002; letter-spacing:0; margin:0 3px}
.listbox1{ background:#fff;box-shadow: 0 6px 12px 0 rgba(33,48,182,.08);border-radius: 12px}
.listflex{display:flex; gap:0 25px; align-items:center; flex-wrap:wrap; color:#444}
.listflex span{color:#999}



.atmntn{font-size:1rem; font-weight:700; text-align:center; color:#AC0002}
footer{padding:10px; text-align:center; background:#4D4D4D; color:#fff; font-size:14px;}
.f00A9::before{content:'\00A9'}
@media (max-width: 760px){
.maindiv,.bodybg{padding:0}
.fiexh1{flex-direction:column; justify-content:center; top:0;margin:20px auto; padding:10px}
.fiexcount,.fiexpay{width:100%; border:none}
.courseul li{flex:1}
.courseul ul{flex-direction:column}

.addtext time{font-size:1rem;gap:5px; margin:3px 0}
.addtext address{gap:5px; font-size:1rem;}

.picbox{flex-direction:column; gap:5px}

.formDl ul,.Web66Pay ul{padding:8px 0; gap:8px 0; flex-direction:column}
.formDl ul li,.Web66Pay li{flex:1; width:100%}


.formDl li .int01{flex:0 0 calc(100% - 75px)}
.formDl li span,.formDl li label{flex:0 0 75px;}
}