/* == 共用區 ============================================================================= */

*{
	margin:0; 
	padding:0;
	-webkit-box-sizing:border-box; /*safari & chrome*/
	-moz-box-sizing:border-box; /*firebox*/
	box-sizing:border-box; /*解除padding影響寬度關係*/
	}

html, body{
	-webkit-text-size-adjust:100%;/*避免ios用戶字體自動放大*/
	font-family:'微軟正黑體', Arial, Helvetica, sans-serif;
	width:100%;

    background-attachment: fixed;
	background-image:url("../images/v_bg2.png");
	background-color: #AEE4F4;
	background-repeat:no-repeat;
	background-position: center top;
	}

ul{ list-style:none;}
li{ list-style:none;}
/*圖片切換*/
.pic{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;}
	
.pic-m{
	width:0;
	height:0;
	overflow:hidden;}





	
ul{ list-style:none; }
.maxw img{max-width:980px;}
.Stay{ width:100%; height:auto; background-color:#FFFFFF; text-align:center; margin:3px auto; font-size:1.5em; color:#003399; max-width:980px; }
.texthidden{
	display:block; /*轉換為塊級元素*/
	height:0; 
	width:0; 
	overflow:hidden;
	}/*隱藏文字，切勿使用display:none;*/

table{
	max-width:1500px;
	text-align: center;}
.TOP-WEB {
	text-decoration:none;
    color:  #FF3;
    font-size: 25px;
    text-align:center;
    background-color:#000;
}
.add {
	font-size: 16px;
	color: #FF9;
	background-color: #000;
    text-align: center;
}
.add2 {
	font-size: 15px;
	color: #FFF;
	background-color: #000;
    text-align: center;
}
.add3 {
	font-size: 20px;
	color: #FF3;
	text-decoration: blink;
	background-color: #000;
    text-align: center;
}

.Stay{  
	text-align:center; 
	margin:0 auto;
	padding:2% auto;
	font-size: 30px;
}

.footer {
	font-family: "微軟正黑體";
	font-size: 16px;
	color: #FF9;
	background-color: #000;
	text-align:center;
    padding:0 auto;
	
}
.footer2 {
	font-family: "微軟正黑體";
	font-size: 15px;
	color: #FFF;
	background-color: #000;
    
}
.footer3 {
	font-family: "微軟正黑體";
	font-size: 20px;
	color: #FF3;
	text-decoration: blink;
	background-color: #000;
    text-align:center; 
   
}

.red{ color: #C00E11; 
    font-weight:bold;}
.red2{ color: #C00E11;font-weight:bold;}
.yel{ color: #C9BC9C; font-size:30px; 
    font-weight:bold;}
.mark{ color: #C00E11; font-size:24px; 
    font-weight:bold;}
.gr{ color: #47AC93; font-size:28px; 
    font-weight:bold;}
.text-orange{color:#eb7624;font-size:24px;font-weight:bold;}
.pale-orange,.hover-pale-orange:hover{color:#5F5479!important;background-color:#FCF2E9!important}
.black{ color: #000; font-size:24px; }

/*刊頭滿版背景*/


.headeroutside{width:100%;   
	background-attachment: fixed;
	background-image:url("../images/bg.png");
	background-color: #fff;

	background-repeat:no-repeat;
	background-position: center top;}
/*桌機刊頭*/
#header{
	width:100%;
	margin:0 auto;}
/*手機刊頭*/
#header-m{
	width:0;
	height:0;
	overflow:hidden;}
/*內容滿版背景*/
.contentoutside{
		width:100%;

}
.contentoutside2{
		width:100%;
  
}
.contentoutside3{	width:100%;
    background-attachment: fixed;
	background-image:url("../images/bg.png");
	background-color: #fff;

	background-position: center top;
}
.contentoutside4{
		width:100%;
    background-attachment: fixed;
	background-image:url("../images/v_bg3.png");
	background-color: #FF9900;
	background-repeat:no-repeat;
	background-position: center top;
}

.contentoutside5{	width:100%;
    background-attachment: fixed;
	background-image:url("../images/v_bg2.png");
	background-color: #E2E1D0;
	background-repeat:no-repeat;
	background-position: center top;
}

/*桌機內容*/
.content{
	width:100%;
	max-width:1500px;
	margin:0 auto;
	padding:0;
	text-align:center;}

.content2{
	width:100%;max-width:1300px;
	margin:0% auto;border-radius: 20px;
	padding:0%;
	text-align:center;}
.content3{
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:0;
	text-align:center;}









/* == 桌機版 ============================================================================= */


.desktopTable{width:100%; max-width:1500px; padding:2%; margin:0% auto;
	    font-size:2em; 	   
	}

.text1{ font-size:30px;  padding:1%;color: #000; 
}



/*浮動連結*/
  div#social-address{
        position:fixed; bottom:50%; left:0; z-index:1000!important;box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
        font-family: '微軟正黑體'; font-size: 16px!important;text-align: center;
    }
    div#social-address .social-btn{color:white;padding: 16px 8px;cursor: pointer; display: block;}
    div#social-address a{color: inherit;text-decoration:none;}
    div#social-address p{margin:0;}
    div#social-address a:hover,div#social-address .social-btn:hover{-webkit-filter:brightness(60%) contrast(150%);    -o-filter:brightness(60%) contrast(150%);    filter:brightness(60%) contrast(150%);}
    div#social-address img {    width: 1em;    padding: 0 0 0.25em 0;}
    div#social-address .mlu{ background-color:#304E8E;}
    div#social-address .mline{ background-color:#29A339; }
    div#social-address .social-btn.mline{position: relative;}
    div#social-address #social-address-lines{
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        color: #29A339;
        top: 0%;
        left: 100%;
        margin: 0.5em 0.25em;
        border: 2px solid;
        border-radius: 0.25em;
        box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.5);
        width: 7em;
        display: inline-table;
    }
    div#social-address #social-address-lines a{display: block;padding: 0 0.5em;}
    div#social-address #social-address-lines a:hover{background: #ededed;}
    div#social-address #social-address-lines p{line-height: 1;border-bottom: 1px solid #ededed;margin: 0;padding: 0.5em 0;}
    div#social-address #social-address-lines a:last-child p{border-bottom: none;}
	



div#social-address .mline2{ background-color:#304E8E; }
    div#social-address .social-btn.mline2{position: relative;}
    div#social-address #social-address-lines2{
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        color:#304E8E;
        top: 0%;
        left: 100%;
        margin: 0.5em 0.25em;
        border: 2px solid;
        border-radius: 0.25em;
        box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.5);
        width: 7em;
        display: inline-table;
    }
    div#social-address #social-address-lines2 a{display: block;padding: 0 0.5em;}
    div#social-address #social-address-lines2 a:hover{background: #ededed;}
    div#social-address #social-address-lines2 p{line-height: 1;border-bottom: 1px solid #ededed;margin: 0;padding: 0.5em 0;}
    div#social-address #social-address-lines2 a:last-child p{border-bottom: none;}	



    	
/* 各班連結 */
.bn3{ width:100%; margin:0% auto; }
.bn3 ul{list-style:none; text-align:center}

.bn3 li a{display:block;color:#FFFFFF;text-decoration:none;list-style:none; }
.bn3 li{display:inline-block; width:30%;border:2px solid  #000; font-size:2em; font-weight:bold; text-align:center; color:#000;     padding: 1%;margin:1%;}
.box1{ width:100%;overflow:hidden; text-align:center;}
.box2{ width:48%;float:left; font-size:1.2em; color: #000; background-color:#33CCCC; text-align:center; list-style:none;  border-radius:40px; }
.box3{ width:48%;float:right;  font-size:1.2em; color: #000; background-color:#66CC33;  text-align:center;list-style:none;   border-radius:40px; }
.box2 a:hover{display:block;background-color:#006666;border-radius:40px; }
.box3 a:hover{display:block;background-color:#336600;border-radius:40px; }

.bn3 li:hover{
	transform:scale(0.95,0.95);
transition:0.5s;}

	/* ==三大優勢-點選滑出資訊== */
.con02{
	width:100%;
    height:auto;
	padding:1% 0;
	overflow:hidden;
	}

.course_wrapper ul{
	margin:0;
    padding:0 1%;
	overflow:hidden;
	}
.course_wrapper li{
	float:left;
    margin:1%;
	width:30%;
	}
.course{
	width:100%;
    margin:0 auto;
	}
.course .bt{
    width:100%;
	padding:1%;
	background-color:#EC4545;
	border-radius:0px 40px 0px 0px;
	cursor:pointer; /*將箭頭滑鼠指標改成手指*/
	text-align:center;
	}
.course .bt img{
	width:100%;
    max-width:300px;
	height:auto;
	text-align:center;
	}

.course .bt2{
    width:100%;
	padding:1%;



	}
.course .bt2 img{
	width:100%;
    max-width:350px;
	height:auto;
	text-align:center;
	}



.course .bt h4{
	margin:0;
    padding:0;
	font-size:2.1em;
	color:#FFF;
	font-weight:normal;
	}
.course .course_box{
	margin:0;
    padding:2% 3%;
	width:100%;
	background:#fff;
	overflow:hidden; 
    border-radius:0px 0px 0px 40px;
	}
.course .course_box h5{
	padding:10px 0;
    font-size:1.3em;
	color:#191B46;
	text-align:left;
	font-weight:normal;}
#box_1, #box_2, #box_3, #box_4, #box_5{ display:none;}/*預設隱藏*/
/*老師輪播*/
.teacherSwiper {
    padding-bottom: 3em;
    background: #fff;
    /*width: calc(100vw);*/
    /*padding-right: 5em;*/
}
:root {
    --swiper-theme-color: #ede6cf;
}
.teacherSwiper .swiper-slide .border-goldenrod,#a08 .bordered{
    border: 0.3rem solid;
    border-image: linear-gradient(to right,#e23d3d 15%,#ede6cf 30%,#e23d3d 60%,#FFF 74%,#e23d3d 89%)10/0.3rem;
    text-align: center;
    padding-top: 7em;background: linear-gradient(to right,#ff792e,#e23d3d);color: #fff;
}
.teacherSwiper .swiper-slide:nth-child(odd) .border-goldenrod{
	   border-image:  linear-gradient(to right,#1a6b96 15%,#ede6cf 30%,#1a6b96 60%,#FFF 74%,#1a6b96 89%)10/0.3rem;
    color: #fff;
    background: #1a6b96;}
.teacherSwiper .swiper-slide .border-goldenrod .top-0{top: 0.5em!important;line-height: 1.4;font-size: 1.1em;}
.teacherSwiper .swiper-scrollbar{

}
#a02-3.bordered{
    border: 5em solid #eee6cf;
    border-width: 1em 4em;
    border-image: url(../images/index-02_2-border.png)220/6em/0.5em 2.5em 0;
    padding: 0;
}
#a02-3>.row-cols-2>.col:nth-child(2){
    border-left: 0.125em dashed #40220f;
    width: calc(50% + 0.75em);
    padding-left: 1.5em;
    margin-left: -1em;
    margin-right: -1.5em;
}
#a02-3 span.col{
    width: 6em;
    flex: auto;
}
#a02-3 .border-goldenrod{
    border: 0.2rem solid;
    border-image: linear-gradient(to right,#e5da9c 15%,#ede6cf 30%,#e5da9c 60%,#FFF 74%,#ded192 89%)10/0.2rem;
    display: inline-block;
    padding: 0.25rem;
    box-shadow: 0.125em 0.125em #00000055;
    text-align: center;
}
#a02-3 .border-goldenrod.pale-brown{background: #FFCC33; width: 6em; }
#a02-3 .border-goldenrod.blue{background: #009999;padding: 0.25em 0.125em;}







.stroke-brown,.hover-stroke-brown:hover{color:#FFF;text-shadow: 0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000,0 0 0.12em #000;}
.text-brown,.hover-text-brown:hover{color:#fff!important}
.font2{width: 10em; margin-right: -2em;}
.btn.cube .position-absolute{z-index: 2;opacity: 1;}
.stroke-white,.hover-stroke-white:hover{color:#000;text-shadow: 0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff,0 0 0.12em #fff;}









#a03_1 .white.border-orange ul{max-width: 70%;list-style: "● ";}
.hvr_card {
    position: relative;color:#FF6600;
    margin:1em auto;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0.25em 0.25em 0.75em #00000033;
    background: url("../images/v_03_1.png")center/100% 100% no-repeat!important;
    aspect-ratio: 1 / 1;
}
.hvr_card:hover{
    background-color: #F17B35;
    transform: translate3d(0,0,1em)scale(1.1);
    box-shadow: 0.75em 0.75em 0.5em 0em #000000bb;
    border: 0.1rem solid #ffffff55;
}
.hvr_card.active ,.hvr_card:hover{animation: none;}
.hvr_card .course {
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 10em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.hvr_card .course>* {
    width: 100%;
    transition: .5s;
    line-height: 1;
    margin: 0;
    position: 0;
}
.hvr_card:hover .course ,.hvr_card.active .course {
    
}
.hvr_card .details {
    position: absolute;
    bottom: -0.2rem;
    left: 0%;
    width: 100%;
    height: 30%;/*100%*/
    background: rgba(249,230,39,0.39);; 
    transition: .5s;
    transform-origin: bottom;
    bottom: -100%;
}
.hvr_card:hover .details ,.hvr_card.active .details {
    bottom: 0%;
    filter: drop-shadow(0.25rem 0.25rem 0.5em #A0000022);
}
.hvr_card .details .center {
    padding: 0.25em 1em ;
    text-align: center;
    position: absolute;
    top: 0.5em;
    top: 70%;
    transform: translateY(-50%);
}


/* == 手機版 ============================================================================= */
@media screen and (max-width:767px){
	
.stroke-brown.text-shadow{text-shadow: 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000, 0 0 0.15rem #000,; }
.text1{ font-size:24px;  padding:1%;
}
 #a02-3 .border-goldenrod.blue{font-size: 2em;}



.cont02{
	
padding:6% 5%;
	}	

.sel{
	width:100%;
       padding:1% 1%;
    overflow: hidden;
	margin:0 auto;
}
.sel li{
	width:98%; 
	
margin:2% 1%;

     float:left;
 transition:0.5s;

	}
 
	.desktopTable{width:100%;  padding:2%; margin:0% auto;
	    font-size:1em; 	   
	}

	
	/*圖片切換*/
.pic{
	width:0;
	height:0;
	overflow:hidden;}
.pic-m{
	display:block;
	width:100%;
	height:auto;
	margin:0;}
	
#header{
	width:0;
	height:0;
	overflow:hidden;}
	
/*手機刊頭*/
#header-m{
	display:block;
	width:100%;
	height:auto;
	margin:0;}	
	

body{
	background-position:60% 18%;
	background-size: 150%;}    



ul{
    list-style: none;
}


/*浮動	連結*/
div#social-address{ width: 100%;bottom: 0;content: "";display: inline-block;clear: both; }
    div#social-address .social-btn{ display: block;float: left;width: 49.99%;padding: 8px 0;}
    div#social-address img {    width: 1em;    padding:0.25em 0.25em 0 0;}
    div#social-address br{display: none;}
    div#social-address .mlu{display: inline-block; }
    div#social-address #social-address-lines{width: 100%;top:initial;bottom:100%;left: 0;}
 
     div#social-address #social-address-lines2{width: 100%;top:initial;bottom:100%;left: 0;}  

   
    } 
    
    
    }