

.wrap{width:100%;position:relative; line-height:1.6; font-size:1em; }

.unitName{ xbackground: #A8A8A8;}
.coursebn{position: relative;}

.coursebn img {
    width: 100%;
    max-width: 837px;
    background-color: #d9ebff;
}
.cb_ver_phone{display: none;}
tr.top-line {
    color: #31a4c1;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #31a4c1;
}
.class-title {    color: #31a4c1;font-size: 20px;    font-weight: bold;}
tr.class-info {	width: 100%;    border-bottom: 1px solid #dfdfdf;}
td.tb-left {   width: 55%;   padding: 10px;    padding-left: 30px;}
td.tb-right {   width: 40%;   text-align: center;}
td.top-date.tb-right {    padding: 0;}
.class-content {
    line-height: 30px;
    margin-left: 4px;
}

.class-login a {    display: inline-block;    padding: 3px 30px;      background-color: #31a4c1;    color: #fff;    margin-top: 10px;    font-weight: bold;}
.for_pal .class-content {
    text-indent: -16px;
    margin-left: 20px;
}
.for_pal .class-content a{color:#31a4c1; }

@media screen and (max-width: 640px) {
.class-info td.tb-right {
    width: 100%;
    display: inline-block;
    margin: 5px 0 15px;
        margin-left: 15px;
}
.class-date {    display: inline-block;}	
.class-login {    display: inline-block;}	
.class-login a {    margin: 0 10px 5px;    padding: 2px 20px;}	
td.top-date.tb-right {    display: none;}
td.tb-left {
    display: inline-block;
    width: 100%;
    padding: 10px 5px;
    text-align: left;
}
.class-title {	font-size: 18px;	}
/*
td.tb-left {
    text-align: center;
    max-width: 350px;
}
*/
td.tb-right {
    text-align: left;
}	
	tr.class-info {
    text-align: left;
}
	.class-content {
    line-height: 30px;
    text-align: left;
    display: inline-block;
}
/*
	.for_pal td.tb-left {
    max-width: 320px;
}
*/

	
	
}


.datesep {display: none;}

ul.text-list .btnType1, .btnType2 {
    display: inline-block;
    line-height: 1.8;
    padding: 0 7px;
    margin-left: 5px;
	    vertical-align: top;
}
 .table-responsive > .table > tbody > tr > td{
    white-space: unset;
}

p.class-date {
    width: 75%;
    display: inline-block;
}
.news-list ul#NewsList3 li {
    width: 100%;
    line-height: 1.8;
    letter-spacing: 0;
    padding: 0.5em 0.2em;
}


.btnColor-orange {
    border: none;
    color: #2098d1;
    background: none;
    box-shadow: none;
}
.btnColor-orange:hover {
    color: #FFFFFF;
    background: #008090;
}



/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ XXXX ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


.wrap .contanier{ width:100%;max-width:900px; margin:0 auto ; padding-bottom:100px;}

.wrap .contanier > h3 { width:100%; text-align: center;margin:0 auto ;}
.wrap .contanier > h3 img{ max-width:100%; height:auto;}





.warn{ text-align:center; font-size:13px; color:#666666} 

.warn a{ text-decoration:underline; color:#FF6600; } 
.warn a:hover{ text-decoration:none;} 


.btns { width:90% ; max-width:600px;  margin:20px auto ; text-align:center; z-index:999;letter-spacing:-5px;}
.btns a { display:inline-block; width:48%; margin:0 2px; height:60px;line-height:60px;font-size:16px; font-weight:bold; text-align:center;  vertical-align:middle;letter-spacing:2px; }




.course-table tr:hover .outline .detail{ display: block;  }


.outline { position:relative;}
.outline:hover .detail{ display: block;}
.outline .detail { display: none;position:absolute; width:220px; top:-10px; left:92%; background:#FFF ; border:1px solid  #666; font-size:15px; 
														box-shadow:2px 2px 2px 3px rgba(0,0,0,.2); border-radius:3px;padding:8px; z-index:9; font-size:13px; text-align:left;}
.outline .detail:before{ content:""; ;width:0px; height:0px; /*置中於畫面*/margin:16px auto auto -6px;position:absolute;left:0;top:0;right:0;bottom:0px; z-index:2;
					border-style:solid; border-width:6px 6px  6px 0; border-color: transparent  #FFF transparent transparent;}
.outline .detail:after{ content:""; ;width:0px; height:0px; /*置中於畫面*/margin:15px auto auto -8px;position:absolute;left:0;top:0;right:0;bottom:0px;z-index:1;
					border-style:solid; border-width:8px 8px  8px 0; border-color:  transparent #666 transparent transparent;}
					
					

/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ table ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


.course-table th{ text-align:left;}



					

/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 文字說明 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


.notice{ background:#f1f1f1; padding:1em; margin-top:1em; }
.notice .item{margin-bottom:5px;  display:table; table-layout:fixed;text-align:left; width:100%;}
.notice .item > *{ display: table-cell; vertical-align:middle;}
.notice .item h3{ font-size:1.3em; color:#b2b2b2;width:12%; text-align:right; font-weight:bold; padding-right:10px;}
.notice .item .content{ border-left:4px solid #b2b2b2; padding-left:10px; font-size:.9em;}
.notice .item .content ol{ list-style:disc; padding-left:18px;  font-size:.8em; margin-top:6px; }
.notice .item .warn{text-align:left; }



/*------手機版--------*/
@media screen and (max-width: 640px) {	

.notice{  margin-top:8px; }
.notice .item h3{font-size:1.1em;letter-spacing: 0;width:86px;text-align: right;}
.datesep {display: inline-block;}

p.class-date {
    width: 100%;
}

li.class-date-wrap {
    text-align: center;
}
.cb_ver_phone{display: inline-block;}
	.cb_ver_web{display: none;}
}
	


