@charset "utf-8";
/* CSS Document */
@import url("grid.css");
@import url("nav.css");
@import url("swi.css");

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');

*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}

html, body{
	padding:0;
	margin:0;
	font-size:max(1vw, 18px);
	font-family:'Noto Sans', sans-serif;
	line-height:1.5em;
	box-sizing:border-box;
	background:url(../images/bg.jpg) top no-repeat;
	background-size: 100%;
}

a {
	color: rgba(102,102,102,1);
	text-decoration:none;
	outline: none; /* for Firefox Google Chrome  */
    behavior:expression(this.onFocus=this.blur()); /* for IE */
}

::-moz-selection{
	color: rgba(255,255,255,1);
    background: rgba(102,102,102,.5);
}

::selection{
	color: rgba(255,255,255,1);
    background: rgba(102,102,102,.5);
}


p{
	font-size:max(1vw, 18px);
	line-height:1.8em;
}

/*===========header==========*/
header{
	padding-top:20px;
	width:100%;
	z-index:1000;
}

header img{
	width:65%;
	padding:5px 20px;
}

/*===========section==========*/
section{
	position:relative;
	width:100vw;
	margin:auto;
}

#talent, #talent2{
	position:relative;
	width:98vw;
	box-sizing:border-box;
	margin-top:0px;
	min-height:200px;
	padding:10px 0px;
	background:url(../images/t_b2.png) repeat-x;
	background-size: cover;
	background-position:bottom;
}

#talent2{
	width:100vw;
	margin-top:0px;
	padding:0px 0px 30px;
}

#events{
	position:relative;
	width:98vw;
}

#event2{
	position:relative;
	width:98vw;
	box-sizing:border-box;
	padding:0px;
}

#event3{
	position:relative;
	width:98vw;
}

#event4{
	position:relative;
	width:98vw;
}

#column{
	position:relative;
	width:98vw;
}

#fot{
	position:relative;
	width:80vw;
	margin:auto;
}

#fot img{
	width:80%;
}

#contact{
}

.padd_set{
	padding:20px 10px;	
}

.padd_set2{
	padding:30px;	
}

.padd_set3{
	padding:0px 30px;	
}

/*===========aside===========*/
aside{
	width:90vw;
	margin:auto;
	padding:70px 0px 0px;
}

#talent aside{
	width:80vw;
	margin:auto;
}

#events aside{
	width:80vw;
	padding:35px 0px 0px;
}

#event2 aside{
	padding:10px 0px 0px;
}

#event3 aside{
	width:95vw;
	padding:35px 0px 0px;
}

#event4 aside{
	width:95vw;
	padding:0px 0px 0px;
}

#colm{
	box-sizing:border-box;
	padding:35px 20px 0px;
}

article{
	width:100%;
	margin:auto;
}

#events article{
	width:80vw;
	margin:auto;
}

#column aside{
	width:80vw;
	margin:auto;
}

#column article{
	width:80vw;
	margin:auto;
}

.c_p{
	width:90%;	
}

.slist{
	padding:30px 0px;
	background:rgba(7,15,78,.2);
}

.slist article{
	width:90%;
	margin:auto;
}

.slist p{
	font-size:max(1vw, 18px);
	font-weight:bold;
}

.slist .row{
	padding:5px 0px;
}

.slist .row >div{
	float:left;
}

.namecard{
	margin:10px;
	width:95%;
	box-sizing:border-box;
	border:solid 1px rgba(255,255,255,1);
	border-radius:10px;
	color:rgba(7,15,78,1);
}

.namecard .tx{
	padding:20px 10px;
}

.namecard:hover{
	color:rgba(255,255,255,1);
	background:rgba(7,15,78,1);
	border:solid 1px rgba(7,15,78,1);
}

.namecard:hover h3{
	text-decoration:underline;
}

.tx p{
	padding:10px 0px 0px;
	font-size:max(1vw, 16px);
	line-height:1.3em;
}

.cirimg{
	width:100%;
	aspect-ratio:1/1;
	border-radius: 50%;
	overflow:hidden;
	background:#eee;
	position:relative;
}

.cirimg img{
	position:absolute;
	top:50%;
	left:50%;
	float:left;
	width:100%;
	height:100%;
	object-fit:cover;
	
	-ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.pad_cir{
	padding:5px;
}

.num{
	clear:both;
	width:100%;
	box-sizing:border-box;
	padding:50px;
	text-align:center;	
}

.num a{
	display: inline-block;
	width:40px;
	line-height:40px;
	color: rgba(7,15,78,1);
	background: rgba(255,255,255,1);
}

.num a:hover, a.onnum{
	color: rgba(255,255,255,1);
	background: rgba(7,15,78,1);
}

.tal_card{
	color:rgba(7,15,78,1);
	padding:20px 20px 20px 0px;
	background:	rgba(255,255,255,1) none;
}

.tal_card h2, .tal_card h4{
	text-align:center;
}

.tal_card h4{
	width:80%;
	margin:auto;
}

.ac_card{
	box-sizing:border-box;
	padding:15px;
	min-height:150px;
}

.ac_card h3{
	padding:5px 0px;
}

.ac_card:hover h3{
	text-decoration:underline;
}

.ban_img{
	width:100%;
	aspect-ratio:16/9 auto;
	/*height:auto;*/
	position:relative;
}

.ban_img img{
	position:absolute;
	top:50%;
	left:50%;
	
	width:100%;
	height:100%;
	object-fit:cover;
	
	-ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    transform: translate(-50%,-50%);
}


/*===========banner===========*/
#m1{
	position:relative;
	width:100%;
	height:auto;
	overflow:hidden;
}

#m2{
	position:relative;
	width:100%;
	overflow:hidden;
	margin:auto;
	background:rgba(255,255,255,1);
}

#s_pic{
	position: relative;
	width: 100%;
	height:auto;
	background: rgba(255,255,255,1);
	aspect-ratio: 16/9;
	overflow:hidden;
}

#s_pic img{
	position:absolute;
	top:50%;
	left:50%;
	float:left;
	width:100%;
	height:100%;
	object-fit:cover;
	
	-ms-transform:translate(-50%,-50%) scale(1,1); /* IE 9 */
    -webkit-transform:translate(-50%,-50%) scale(1,1); /* Safari */
    transform: translate(-50%,-50%) scale(1,1); /* Standard syntax */
}

/*===============textcolor===============*/
.text_db{/*dark blue*/
	color:rgba(7,15,78,1);
}

.text_b{/*blue*/
	color:rgba(39,114,219,1);
}

.text_g{/*green*/
	color:rgba(58,177,200,1);
}

.text_p{/*purple*/
	color:rgba(139,47,151,1);
}

.t_date{
	font-family: 'Roboto', sans-serif;
	font-size:max(1vw, 16px);
}

.t_date_l{
	font-family: 'Roboto', sans-serif;
	font-size:max(1vw, 25px);
	line-height:1.2em;
}

.t_note{
	font-family: 'Roboto', sans-serif;
	font-size:max(1vw, 16px);
}

.t_list{
	font-family: 'Roboto', sans-serif;
	font-size:max(1vw, 14px);
}

/*=============line===========*/
.title_db, .title_b{
	width:100%;
	line-height:1.2em;
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:solid 2px rgba(7,15,78,1);
}

.title_b{
	border-bottom:solid 2px rgba(39,114,219,1);
}

.detail_db, .detail_b{
	width:100%;
	padding-bottom:10px;
	border-bottom:solid 5px rgba(7,15,78,1);
}

.detail_b{
	border-bottom:solid 5px rgba(39,114,219,1);
}

.scard{
	width:100%;
	height:100%;
	box-sizing:border-box;
	padding:30px;
	margin-bottom:20px;
}

#arti h3{
	padding:20px 0px 15px;
}

.imgbox_sc{
	width:100%;
	overflow:hidden;
	position:relative;
	box-sizing:border-box;
	text-align:center;
	padding:30px 0px;
}

.imgbox_sc img{
	width:90%;
}

.par_break a{
  overflow-wrap: break-word;
  word-wrap: break-word;
  
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/*=============headtext===========*/

h1, h2, h3{
	line-height:1.2em;	
}

.h1_hz, .h1_hz2{
	font-family:'Noto Sans TC', sans-serif;
	box-sizing:border-box;
	font-size:max(1vw, 30px);
	transform-origin:left bottom;
	transform:scaleX(1.1);
	transform:scaleY(0.8);
	font-weight:700;
}

.h1_hz2{
	transform-origin: center;
}

.h2_hz{
	font-family:'Noto Sans TC', sans-serif;
	box-sizing:border-box;
	font-size:max(1vw, 25px);
	transform-origin:left bottom;
	transform:scaleX(1.1);
	transform:scaleY(0.8);
	font-weight:700;
}

.h3_hz{
	font-family:'Noto Sans TC', sans-serif;
	box-sizing:border-box;
	font-size:max(1vw, 20px);
	transform-origin:left bottom;
	transform:scaleX(1.1);
	transform:scaleY(0.8);
	font-weight:700;
}

.h3_en{
	font-family:'Roboto';
	box-sizing:border-box;
	line-height:2.5em;
	font-size:max(1vw, 18px);
	font-weight:700;
}

.h4_en{
	font-family:'Roboto';
	box-sizing:border-box;
	line-height:2em;
	font-size:max(1vw, 16px);
	font-weight:700;
}

.h4_en2{
	font-family:'Roboto';
	box-sizing:border-box;
	line-height:1.5em;
	font-size:max(1vw, 18px);
	font-weight:700;
}

/*==============button list===============*/

.trinav_db, .trinav_b, .trinav_g, .trinav_p, .trinav_n{
	width:100%;
	padding:0px 10px 10px 0px;
	box-sizing:border-box;
}

.trinav_nm{
	width:100%;
	box-sizing:border-box;
}

.trinav_db a, .trinav_b a, .trinav_g a, .trinav_p a, .trinav_n a{
	display: inline-block;
	box-sizing:border-box;
	padding:5px 25px;
	margin:5px 5px 5px 0px;
	color: rgba(7,15,78,1);
	background: rgba(255,255,255,1);
	border:solid 1px rgba(7,15,78,1);
}

.trinav_b a{
	color: rgba(39,114,219,1);
	border:solid 1px rgba(39,114,219,1);
}

.trinav_g a{
	color: rgba(58,177,200,1);
	border:solid 1px rgba(58,177,200,1);
}

.trinav_p a{
	color: rgba(139,47,151,1);
	border:solid 1px rgba(139,47,151,1);
}

.trinav_nm a{
	display: inline-block;
	width:100%;
	margin:auto;
	color: rgba(7,15,78,1);
	background: rgba(255,255,255,1);
	border:solid 1px rgba(7,15,78,1);
}

.trinav_db a:hover, a.onnav_db{
	color: rgba(255,255,255,1);
	background: rgba(7,15,78,1);
}

.trinav_b a:hover, a.onnav_b{
	color: rgba(255,255,255,1);
	background:rgba(39,114,219,1);
}

.trinav_g a:hover, a.onnav_g{
	color: rgba(255,255,255,1);
	background:rgba(58,177,200,1);
}

.trinav_p a:hover, a.onnav_p{
	color: rgba(255,255,255,1);
	background:rgba(139,47,151,1);
}

.trinav_nm a:hover, a.onnav_nm{
	color: rgba(255,255,255,1);
	background: rgba(7,15,78,1);
}

a.onnav_db_0{
	color: rgba(255,255,255,1);
	background: rgba(7,15,78,1);
}

a.onnav_db_0:hover{
	color: rgba(255,255,255,1);
	background: rgba(7,15,78,.2);
}

a.onnav_db_1{
	color: rgba(255,255,255,1);
	background: rgba(7,15,78,1);
}

/*==============button===============*/
a.bt_plus_db{
	display:block;
	float:left;
	box-sizing: border-box;
	margin:10px 0px;
	padding:10px;
	width:98%;
	color: rgba(7,15,78,1);
	background: none;
	border:solid 1px rgba(7,15,78,1);
	text-align:center;
}

a.bt_plus_db:hover{
	color: rgba(255,255,255,1);
	background: rgba(7,15,78,1);
	border:solid 1px rgba(7,15,78,1);
}

a.bt_plus_b, a.bt_plus_g, a.bt_plus_sg{
	display:block;
	float:left;
	box-sizing: border-box;
	width:95%;
	color: rgba(39,114,219,1);
	background: none;
	margin:0px 0px;
	padding:8px 0px;
	text-align:right;
}

a.bt_plus_g{
	color: rgba(58,177,200,1);
}

a.bt_plus_sg{
	margin:0px 0px;
	color: rgba(58,177,200,1);
}

a.bt_plus_b:hover{
	text-decoration:underline;
}

a.bt_plus_g:hover, a.bt_plus_sg:hover{
	text-decoration:underline;
}

a.t_b{
	color:rgba(58,177,200,1);
	text-decoration:underline;
}

a.t_b:hover{
	font-weight:bold;
}

a.reg_btn, a.reg_btn:visited{
	box-sizing: border-box;
	width:100%;
	padding:10px;
	margin:20px 0px;
	text-align:center;
	background: rgba(39,114,219,1);
	color:rgba(255,255,255,1);
	display:none;
}

a.reg_btn:hover, a.reg_btn:active{
	background: rgba(39,114,219,.8);
	color:rgba(255,255,255,1);
}

a.sreg_btn{
	position:fixed;
	z-index:100000;
	bottom:20px;
	right:20px;
	display:block;
	box-sizing: border-box;
	padding:10px 0px;
	width:100px;
	height:100px;
	text-align:center;
	background: rgba(39,114,219,1);
	color: rgba(255,255,255,1);
	border-radius:999em;
	display:none;
}

a.sregs_btn, a.sregs_btn:visited{
	position:fixed;
	z-index:100000;
	bottom:20px;
	right:20px;
	display:block;
	box-sizing: border-box;
	padding:10px;
	text-align:center;
	background: rgba(39,114,219,1);
	color: rgba(255,255,255,1);
	display:none;
}

a.sreg_btn:hover, a.sreg_btn:active, a.sregs_btn:hover, a.sregs_btn:active{
	background: rgba(39,114,219,.8);	
	color:rgba(255,255,255,1);
}

a.totopbt{
	width:50px;
	height:50px;
	display:block;
	box-sizing: border-box;
	margin:10px 30px;
	margin-bottom:30px;
	float:right;
	text-align:right;
	border:solid 1px rgba(7,15,78,1);
	background: url(../images/ar_top.png) no-repeat rgba(7,15,78,1);
	background-position:center;
	background-size:cover;
}

a.totopbt:hover{
	border:solid 1px rgba(7,15,78,1);
	background: url(../images/ar_top.png) no-repeat rgba(7,15,78,.8);
	background-position:center;
	background-size:cover;
}

.bt_down_tx{
	display:block;
	box-sizing: border-box;
	padding:15px 0px;
	color: rgba(102,102,102,1);
	border-top:solid 1px rgba(102,102,102,.3);
}

a.bt_down_tx:hover, .onlink{
	color: rgba(0,0,102,1);
	background:rgba(220,220,220,.2);
}


/*==============before icon===============*/
.icon_b, .icon_g{
	position: relative;
	font-size:max(1vw, 14px);
}

.icon_b::before{
	content: url(../images/icon_b.png); /*產生一個空的元素*/
	position: absolute; /*利用absolute定位*/
}

.icon_g::before{
	content: url(../images/icon_g.png); /*產生一個空的元素*/
	position: absolute; /*利用absolute定位*/
}

/*==============before icon big===============*/
.b_icon_b, .b_icon_g{
	position: relative;
	font-size:max(1vw, 20px);
	padding-bottom:10px;
}

.b_icon_b::before{
	content: url(../images/icon_b.png); /*產生一個空的元素*/
	position: absolute; /*利用absolute定位*/
}

.b_icon_g::before{
	content: url(../images/icon_g.png); /*產生一個空的元素*/
	position: absolute; /*利用absolute定位*/
}

/*============other img==============*/
.para_img{
	width:100%;	
}

/*==============footer===============*/
footer{
	background: rgba(199, 204, 219,1);
	height:auto;
	padding:80px 30px;
	margin-top:50px;
	color:rgba(7,15,78,1);
}

footer img{
	width:90%;
}

footer h3{
	margin-bottom:10px;	
}

footer h5{
	display:block;
	padding:0;
	margin:0;
	font-weight:normal;
}

footer ul{
	padding:0;
	list-style: none;
	margin-bottom: 40px;	
}

footer li{
	display:inline-block;
	padding:5px 0px 8px;
	width:90%;
	margin:0px 5px;
	font-size:max(1vw, 18px);
	border-bottom:solid 1px rgba(7,15,78,1);
}

footer a{
	color:rgba(7,15,78,1);
}

footer a:hover{
	font-weight:bold;
}

footer h5 a{
	border-bottom:solid 1px rgba(7,15,78,1);
}

footer .nav_icon{
	display: inline-block;
	padding:0px 10px 0px 0px;
}

/*==============pad===============*/
@media only screen and (min-width: 768px) {
body{
	font-size:max(1vw, 18px);
}

header{
	padding-top:30px;
}

header img{
	width:100%;
	padding:0px;
}

.ac_card{
	flex:1;
	min-height:300px;
}

#m2{
	width:80%;
}

section{
	width:80vw;
	margin:auto;
}

#talent, #talent2{
	position:relative;
	width:98vw;
	box-sizing:border-box;
	margin-top:0px;
	min-height:400px;
	padding:20px 0px;
	background:url(../images/t_b2.png) repeat-y;
	background-size: cover;
}

#talent2{
	min-height:200px;
	margin-top:0px;
	border-top:solid 8px rgba(7,15,78,1);
}

#banner{
	border-top:solid 8px rgba(7,15,78,1);
}

#event2{
	min-height:50px;
	border-top:solid 8px rgba(7,15,78,1);
	background:url(../images/t_b2.png) repeat-y;
}

.padd_set{
	padding:20px;	
}

.padd_set2{
	padding:30px;	
}

.padd_set3{
	padding:0px 80px;	
}

aside{
	width:90vw;
	padding:70px 0px 0px;
}

.detail_db, .detail_b{
	padding-bottom:0px;
}

.h1_hz, .h1_hz2{
	font-size:max(1vw, 40px);
	font-weight:900;
}

.h2_hz{
	font-size:max(1vw, 30px);
}

.h3_hz{
	font-size:max(1vw, 22px);
}

.h3_en{
	font-size:max(1vw, 25px);
}

.h4_en{
	font-size:max(1vw, 22px);
	line-height:2.2em;
}

.h4_en2{
	font-size:max(1vw, 22px);
	line-height:1.8em;
}

.t_date_l{
	font-size:max(1vw, 25px);
	line-height:1.2em;
}

.scard{
	padding:20px;
}

.slist p{
	font-size:max(1vw, 20px);
	font-weight:bold;
	line-height:2em;
}

a.bt_plus_b, a.bt_plus_g{
	margin:10px 0px;
	padding:10px;
	text-align:right;
}

a.reg_btn, a.reg_btn:visited{
	display:block;
}

a.bt_plus_sg{
	margin:5px 0px;
	color: rgba(58,177,200,1);
}

footer li{
	display:inline-block;
	padding:0px 0px 5px;
	width:45%;
}

.but_align{
	position:absolute;
	bottom: 0%;
  	right: 3%;
  	transform: translate(0%, 0%);
}

.namecard{
	display:flex;
	flex-wrap: wrap;
	flex-direction:row;
	justify-content:flex-start;
	align-items:flex-start;
	overflow:hidden;
}

.nc{
	flex:1;
	min-height:150px;
}

#ac_content{
	display:flex;
	flex-wrap: wrap;
	flex-direction:row;
	justify-content:flex-start;
	align-items:flex-start;
}

}

/*==============pc===============*/
@media only screen and (min-width: 1200px) {
body{
	font-size:max(1vw, 20px);
}

header img{
	width:100%;
	padding:0px;
}

aside{
	padding:70px 0px 0px;
}

.ac_card{
	flex:1;
	min-height:350px;
}

#events aside{
	width:80vw;
	padding:50px 0px 0px;
}

#event2 aside{
	padding:30px 0px 0px;
}

#column aside{
	width:80vw;
}

#column article{
	width:80vw;
}

.padd_set{
	padding:30px;	
}

.padd_set2{
	padding:50px;	
}

.padd_set3{
	padding:0px 150px;	
}

.h1_hz, .h1_hz2{
	font-size:max(1vw, 50px);
	transform:scaleX(1.2);
}

.h2_hz{
	font-size:max(1vw, 35px);
	transform:scaleX(1.2);
}

.h3_hz{
	font-size:max(1vw, 24px);
	transform:scaleX(1.2);
}

.h3_en{
	font-size:max(1vw, 30px);
	line-height:3em;
}

.h4_en{
	font-size:max(1vw, 22px);
	line-height:2.4em;
}

.h4_en2{
	font-size:max(1vw, 22px);
	line-height:2em;
}

.t_date_l{
	font-size:max(1vw, 25px);
	line-height:1.2em;
}

.scard{
	padding:50px;
}

.slist p{
	font-size:max(1vw, 22px);
}

#fot img{
	width:70%;
}

}